CODEWITHSUNDEEP
jquerydraggablejquery-ui-sortablehidden
mavili
mavili

Reputation: 3424

jquery draggable with hidden content

I am using draggable and sortable lists to have items dragged and sorted between them. However, the items I have are slidable (i.e. clicking on them dhows/hides content). When I drag an item from one list to another, the sliding effect is lost. Also, if I have a item with its children nodes hidden, and I drag the item to another list, only the item (without any children content) is dragged. Here is the code

http://jsbin.com/ujivav/1/edit

Upvotes: 3

Views: 222

Answers (3)

J.T. Blum
J.T. Blum

Reputation: 324

It doesn't look like "clone" re-creates the event handlers, just the DOM element. Try copying manually on the "stop" event instead. That way you can tell it what to do with the new DOM element.

Upvotes: 0

gotohales
gotohales

Reputation: 3695

KHY is correct, but you could also change the click event to use on instead, like so:

$('body').on('click', '.clicktohide',function(){
    $(this).siblings().slideToggle('fast');
});

Here's an example http://jsbin.com/ujivav/4/edit

Upvotes: 3

kyiu
kyiu

Reputation: 1976

I believe it is because the binding with the "click" event takes place once your initial page is loaded. Given that, in your example, after being dragged, the element with the ".clicktohide" class is duplicated, the duplicate element wasn't in the selection to which the "click" event has been bound.

I guess you'll have to bind this event on the dragged element by implementing a callback function to be called when the "stop" event is triggered.

Upvotes: 2

Related Questions