All geek questions in one place

How to make dynamically added list items draggable in jquery?

Here is my code from http://jsfiddle.net/XUFUQ/1/

$(document).ready(function() { addElements(); } ); function addElements() { $("#list1").empty().append( "<li id='item1' class='list1Items'>Item 1</li>"+ "<li id='item2' class='list1Items'>Item 2</li>"+ "<li id='item3' class='list1Items'>Item 3</li>" ); } $(function() { // there the gallery and the trash var $gallery = $( "#list1" ), $trash = $( "#list2" ); // let the gallery items be draggable $( "li", $gallery ).draggable({ cancel: "button", // these elements won't initiate dragging revert: "invalid", // when not dropped, the item will revert back to its initial position containment: "document", helper: "clone", cursor: "move" }); // let the trash be droppable, accepting the gallery items $trash.droppable({ accept: "#list1 > li", drop: function( event, ui ) { $("#list2").append(ui.draggable); addElements(); } }); });

In the document preparation method, I add some elements to list1, and then initialize the drag and drop in this list so that for the first time I can drag and drop the elements of list1. When dropping list2, I call the addElements () function to clear and add some elements to list1. But I can not drag these added items.

How can I make these items draggable?

+4
source share
5 answers

Here is an ugly version of what you need to do based on the http://jsfiddle.net/XUFUQ/6/ update. It is best to discard the recoverable code:

 // let the trash be droppable, accepting the gallery items $trash.droppable({ accept: "#list1 > li", drop: function( event, ui ) { $("#list2").append(ui.draggable); addElements(); $( "li", $gallery ).draggable({ cancel: "button", // these elements won't initiate dragging revert: "invalid", // when not dropped, the item will revert back to its initial position containment: "document", helper: "clone", cursor: "move" }) } });

Basically, the draggable call only connects to elements that exist during its launch. This adds various mouse processing events to each element. If you add elements, they don’t know anything about them, so you need to call draggable on them again.

The other two answers provide examples of where you can add draggable to ensure that elements are included, but this is an exercise for coding.

+4
source

Here is a little trick that I did for any future seeker :) This code needs to be run only once, and it requires almost no explanation.

 //The "on" event is assigned to the "document" element which is always available within the context //Capture all the "mouseenter" event to any child element of "document" with a specific class (you can you any valid jQuery selector you like) //any live and dynamic element with the class will become draggable (haven't tested on touchscreen devices) $(document).on("mouseenter", '.someClass', function(e){ var item = $(this); //check if the item is already draggable if (!item.is('.ui-draggable')) { //make the item draggable item.draggable({ ............. }); } });

Hooray!

+16
source

add the newly added items again.

 function addElements() { $("#list1").empty().append( "<li id='item1' class='list1Items'>Item 1</li>"+ "<li id='item2' class='list1Items'>Item 2</li>"+ "<li id='item3' class='list1Items'>Item 3</li>" ); $("#list1 li").draggable({ cancel: "button", // these elements won't initiate dragging revert: "invalid", // when not dropped, the item will revert back to its initial position containment: "document", helper: "clone", cursor: "move" }); }

here fiddle

+1
source 
  function addElements() { $("#list1").empty().append( "<li id='item1' class='list1Items'>Item 1</li>"+ "<li id='item2' class='list1Items'>Item 2</li>"+ "<li id='item3' class='list1Items'>Item 3</li>" ); // there the gallery and the trash var $gallery = $( "#list1" ); $( "li", $gallery ).draggable({ cancel: "button", // these elements won't initiate dragging revert: "invalid", // when not dropped, the item will revert back to its initial position containment: "document", helper: "clone", cursor: "move" }); }

You just had to click your ".draggable ()" method in your "addElement ()". thanks to this, you will add a drag and drop function to every list you add to your gallery.

Check this script for a fix. http://jsfiddle.net/XUFUQ/7/

0
source

Try the following:

 $(document).ready(function () { addElements(); var $gallery = $("#list1"), $trash = $("#list2"); $("li", $gallery).draggable({ cancel: "button", revert: "invalid", containment: "document", helper: "clone", cursor: "move" }); $trash.droppable({ accept: "#list1 > li", drop: function (event, ui) { $("#list2").append(ui.draggable); addElements(); } }); }); function addElements() { $("#list1").empty().append( "<li id='item1' class='list1Items'>Item 1</li>" + "<li id='item2' class='list1Items'>Item 2</li>" + "<li id='item3' class='list1Items'>Item 3</li>"); $("#list1 > li").draggable({ cancel: "button", // these elements won't initiate dragging revert: "invalid", // when not dropped, the item will revert back to its initial position containment: "document", helper: "clone", cursor: "move" }); $("#list2").droppable({ accept: "#list1 > li", drop: function (event, ui) { $("#list2").append(ui.draggable); addElements(); } }); }

JSFIDDLE DEMO

0
source

Source: https://habr.com/ru/post/1494226/

More articles:


All Articles