Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Issues with dragging and dropping jQuery UI draggable element from one list and put it into an other

I am using jQuery UI and can create an simple drag 'n drop list. But now, I want to drop the element into an other list. jQuery always thinks the item has been droppen on the false place and slides it back into the origin list.

like image 283
user63371 Avatar asked Feb 09 '09 16:02

user63371


People also ask

Why is draggable not working?

Check whether your draggable object is already loaded in the viewport. If it is not, it won't work properly. JUST AFTER the draggable object to be absolutely sure that everything is loaded at the correct time.

How do you drag and drop in jQuery?

Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port. If the value of this option is set to false, it will prevent the DOM elements to be dragged .

How do I delete a draggable element?

We can disable drag and drop on HTML elements by setting the draggable attribute to false . We set draggable to false so we can't drag it. We add event listeners for the dragstart and drop events with addEventListener .


1 Answers

I think the solution is found here: http://ui.jquery.com/demos/sortable/#connect-lists

and its done something like this:

$(function() {
        $("#sortable1, #sortable2").sortable({
            connectWith: ['.connectedSortable']
        });
    });
like image 151
Frost Avatar answered Sep 22 '22 13:09

Frost