Bind Functions to Drag&Drop Appended Clones

[PropKittyParticipant]

Hello! We’ve recently purchased JQWidgets and I’m experimenting in the Drag and Drop function. However, I’m running into a difficulty I simply can’t solve.

// JQWidget Drag and Drop with Append
$('.section').jqxDragDrop({ restricter: 'body', dropTarget: '#worksheet', dropAction: 'none' });
$('.section').bind('dragEnd', function () {
    $(this).clone().appendTo("#worksheet");
});

This is the bit of JQWidget I’m using to make it so when I drag a section from the library into the worksheet, it appends the code of that section to the worksheet. However, the two main things I have on section (1) the function that makes it draggable and 2) the hover and animations with the Edit Menu, code not shown) no longer function.

<div id="library" class="clearfix">    
    <div class="section">
        <h3>Section 1</h3>
        <p>There's some text and what not in this section.</p>

        <!-- editMenu -->
        <div class="editMenu">
            <ul class="editList">
                <li><a href="#" class="removeSection">Remove</a></li>
                <li><a href="#" class="editSection">Edit</a></li>
                <li><a href="#" class="cancelSection">Cancel</a></li>
                <li><a href="#" class="saveSection">Save</a></li>
            </ul>
        </div><!-- /editMenu -->
    </div><!-- /section -->
</div><!-- /library -->
<div id="worksheet" class="clearfix">

</div><!-- /worksheet -->

I assume this is because I’m cloning it and somehow the functions aren’t bound to it due to that, but I don’t know how to get around that. Any ideas? I have to know how to make functions bind to a newly dragged item. Thanks!

[PropKittyParticipant]

So I discovered the .clone(true) trick after two days of frustration (I swear it’s jinxed that I posted this and 30 minutes later I figure it out) but it still has an issue. The draggable ‘works’ and it looks like you can drag the new thing around, but it in fact, when clicked upon to drag, drags the ORIGINAL around instead of the clone you clicked on. The clone has the same exact id (jqwidgetLETTERANDNUMBERS) so it thinks I’m clicking on the original.

How do you get it to add a new ID to the clone? Is that even possible?

[HristoParticipant]

Hello PropKitty,

Thanks for using our product. Unfortunately, jqxDragDrop does not support the functionality you requested. The possibilities of this plug-in are shown in the demos.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts