Search jQuery

jQuery Forum

jQuery UI droppable

in Using jQuery UI • 10 years ago

Normally, a droppable function drops "text element" to a droppable div

/////////////////////////////example///////////////////////////////////
$("#cart ol").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function(event, ui) {
                $(this).find(".placeholder").remove();
                $("<li></li>").text(ui.draggable.text()).appendTo(this);

            }
})
///////////////////////////////////////////////////////////////////////////

My question is: Can I also drop a hidden input to a droppable div? (<input type="hidden...)

Recently i am creating a shopping cart that will only fire up the database when everything is dragged into my droppable cart. Therefore, I need to drag and drop the hidden input to my shopping cart.(<input type="hidden...)

$("<li></li>").text(ui.draggable.text()).appendTo(this);   <-----this line of code has to change because it only drops TEXT value

I will be looking forward to your answers.

Replies(8)

ollie2893

Re: jQuery UI droppable

10 years ago

Normally, a ui-droppable absorbs a ui-draggable. Your text construction is not normal. In so much as a hidden input cannot itself be dragged by the user (what to click on?), it also cannot be dropped. However, if the hidden input were part of a visible and draggable div, then, sure, the hidden input will make it into the droppable by virtue of the draggable div being dropped.

robby123

Re: jQuery UI droppable

10 years ago

does that mean by chaning every <li> to <div> would work?

Thank you for the prompt reply

ollie2893

Re: jQuery UI droppable

10 years ago

A <li> is just a particular kind of <div>. Assuming it's visible (and thus draggable by the user), then it works just as well. And if you had sthg like

<li>Hello world<input type='hidden' /></li>

then the <input> element will be passed into the droppable as part of the <li> construct.

robby123

Re: jQuery UI droppable

10 years ago

yes, I am aware of that, but for some reason, the the hidden input did not get dropped to my shopping cart, only the visible element is dropped. (Even a text box can not be dropped to my shopping cart)
I am saying if it is the droppable code that I have to work on, because as it mentions, it is only the "text" that is droppable.

I can drag the hidden input, but can't drop it to my shopping cart

$("<li></li>").text(ui.draggable.text()).appendTo(this);<------is this line of code the problem?

ollie2893

Re: jQuery UI droppable

10 years ago

I probably don't understand what you are doing. Your drop code should simply do

ui.draggable.detach().attach("#ShoppingCart");

and that's that. I assume here that #ShoppingCart's some kind of <ul> and that ui.draggable is a <li>. I am not clear what all that text(...) stuff's about.

robby123

Re: jQuery UI droppable

10 years ago

My dropping is actually came from jQuery IU' shopping cart. Since you are saying drop code should be simply ui.draggable.detach().attach("#ShoppingCart"); Is it possible for you the elaborate on that? Or give me a more complete version of drag and drop?

This is mine:
      $("#catalog li").draggable({
            appendTo: "body",
            helper: "clone"
        });
        $("#cart ol").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function(event, ui) {
                $(this).find(".placeholder").remove();
                $("<li></li>").text(ui.draggable.text()).appendTo(this);
            }
        })

ollie2893