Geek Answers Handbook

Jquery sort / drag double event

I have a drag and drop code that works fine. Just make a small request. I noticed that if I add a warning to the drop function for debugging purposes (for example, alert (draggedItem.text ());) it triggers a warning twice when I drop something into the drop area. I read in another post that using droppable and sortable together triggers this strange double event. But I need to use the droppable event to get the object of the draggable object (ui.draggable) - this means that I can manipulate it when I drop it. If there is another way to get a draggable object, tell me :) Also, if you have an explanation why this happens, that would be interesting ...

$(".field > li").draggable({ helper:'clone', opacity: 0.4, connectToSortable:'.dragrow' }); $(".dragrow").droppable({ drop: function(e, ui) { draggedItem = ui.draggable; //alert(draggedItem.text()); } }).sortable({ //code here to do stuff with 'draggedItem'

I also have another request related to this, but since my code is quite large, I cannot post all the information here. Therefore, I understand that if you can’t help - simply, if something comes to mind, that would be great. Basically, I have a list of "blocks" that I can drag into multiple lines. Individual rows can be hidden using a switch event. If I have 3 rows, I can drag and drop blocks into any of them. If I then hide the first one, I can no longer drag to the other two lines. I can still sort them. And as soon as I start sorting them, I can drag them into them again. Weird ...

+6
jquery double jquery-ui-sortable draggable droppable
source share
2 answers

Check out DEMO http://jsfiddle.net/yeyene/FUyTe/1/

As you already mentioned, yes, using droppable and sortable together raises this strange double event. But, if you still want to use the draggedItem object , you can still use this with the ability to sort the reception.

And also you can use ui.item to get the current item being dragged.

Try to comment and turn off each warning and see, now it works only once.

 $(".field > li").draggable({ helper:'clone', opacity: 0.4, connectToSortable:'.dragrow' }); $(".dragrow").droppable({ drop: function(e, ui) { draggedItem = ui.draggable; } }).sortable({ receive: function(e, ui) { // here is the draggedItem object of "droppable" alert(draggedItem.text()); // here is the draggedItem object of "sortable" draggedItem2 = ui.item; //alert(draggedItem2.text()); } });

Here is one way to modify a discarded html element.

DEMO http://jsfiddle.net/yeyene/7fEQs/8/

+2
source share

Have you verified that you do not have a jquery script tag twice on your site?

-one
source share

More articles:


All Articles