CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Sean Law
Sean Law

Reputation: 45

Cloned draggable with deepWithDataAndEvents = true unable to be dragged again

I want to be able to:

Currently, with the .clone method set to clone(), the cloned draggable can be dragged but understandably the clone does not retain data from the initial draggable.

If clone(true) is used, the cloned draggable retains data from the initial draggable but cannot be dragged.

var dropped = jQuery(ui.draggable).clone().addClass("dropped").draggable(); //No data
var dropped = jQuery(ui.draggable).clone(true).addClass("dropped").draggable(); //Not draggable

Would anyone have any ideas what the problem might be? Any help is greatly appreciated. Here is the jsFiddle I have been working on - http://jsfiddle.net/wc71z5to/

Upvotes: 2

Views: 129

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93631

If you are able to update to a slightly later version of jQuery (I use 19.2. in the JSFiddle), you can use delegated events for the click and not worry about using a deep clone.

http://jsfiddle.net/TrueBlueAussie/wc71z5to/2/

jQuery(document).on('click', '.component', function() {
  alert($( this ).data( 'name' ));
});

It is not 100% obvious from the example what it is you need to retain, behaviour-wise, from the clones. If you can clarify I will try to ensure this meets your needs :)

A delegated event works by listening for events bubbling up to a non-changing ancestor. document is the default if there is nothing convenient/closer. It then applies the jQuery selector to the elements in the bubble chain. It then calls the function for any matching element that caused the event. This means the element does not have to match until event time, rather than when the event handler is created.

Note: Do not use 'body' for delegated events, as styling can cause the body to have 0 height and events may not occur! Always use document as the fallback.

Upvotes: 1

Related Questions