Working with jQuery UI Draggable, Droppable and Sortable?
1: Your drop() gets called twice because connectToSortable is also triggering a drop() My suggestion would be to delete $("#doc-editor-content").droppable() altogether, and instead add the receive(e, ui) handler to your sortable 2: Your fix works. However I would suggest a much easier alternative: leave the sortable always enabled and add the option "handle: h2". (Pick any tag that will not exist within your LIs.) This will let you drop into the list, but disable user sorting in-place Example: $('#item-holder').
Sortable({ placeholder: 'placeholder-highlight', cursor: 'pointer', handle: 'h2', receive: function(e, ui) { console. Log('dropped'); } }).
1: Your drop() gets called twice because connectToSortable is also triggering a drop(). My suggestion would be to delete $("#doc-editor-content").droppable() altogether, and instead add the receive(e, ui) handler to your sortable. 2: Your fix works.
However I would suggest a much easier alternative: leave the sortable always enabled and add the option "handle: h2". (Pick any tag that will not exist within your LIs. ) This will let you drop into the list, but disable user sorting in-place.
Example: $('#item-holder'). Sortable({ placeholder: 'placeholder-highlight', cursor: 'pointer', handle: 'h2', receive: function(e, ui) { console. Log('dropped'); } }).
I have an ul of draggable items (#doc-editor-options ul li), an area for dropping those items (#doc-editor-content) and an ul within that area for holding those items (#items-holder), which is sortable. This dragging and dropping is only one-way, only items from the list can be dragged and dropped into the holder. $("#doc-editor-options ul li").
Right now when I drag an item from the list and drop it into the other list, the drop callback for .droppable() is called twice. I think this has something to do with the #item-holder being sortable. I want it to only be fired when I drop an item into the list and only know about that item's event and ui in the callback.
I also need the functionality where by default, the items-holder is not sortable. The only time it becomes sortable is when you are dragging and hovering an item over it. So I can't sort the list by default, but if I drag an item over to it, I can choose where to place that item in the list (i.e.
The list is now sortable) and once I drop it, the list becomes unsortable again. EDIT: I figured out #2, I needed to bind mousedown to the draggable items which enables sorting then disables it on mouseup. Still having problems with #1, it seems like some of the sortable events are firing the drop callback when I drop an item in or I hover out of the item holder.
I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.
Related Questions
JQuery UI Sortable and Draggable List Interaction Not Working Quite Right?
JQuery UI draggable-sortable does not work inside an initially inactive tab (jquery ui tabs)?
Jquery Draggable and Backbone.js getting reference to backbone model from inside the droppable success callback?
JQuery draggable droppable compatibility issue with firefox and ie?
JQuery draggable/droppable: access to original element?
JQuery Draggable / Droppable targeting components?