Drag and drop in jQuery

    Date: 01/22/08 (WebDesign)    Keywords: java, web

    How do I clone something that's being dragged and dropped, and have the clone be draggable?

    ----------------------------------

    I'm just starting to migrate some drag-and-drop code that uses X library to jQuery. What I had before is an interface like this:

    2 DIV containers, "frombox" and "tobox". In frombox there's a bunch of images ("items"). When you drag one from frombox to tobox it's copied. When you drag it back it's deleted. I had this working before, but I'm right now I'm stuck at one problem when trying to do it with jQuery

    So far with the jQuery version I can drag them back and forth without copying, and I can drag them down from "frombox" to "tobox" WITH copying, but the clones become undraggable. My code looks like:

    $("#tobox").droppable({
        accept: ".itemimage",
        tolerance: 'touch',
        drop: function(ev, ui) {
            var dropped = ui.draggable.element;
            $(dropped).clone().appendTo(this);
        }
    });


    Which allows copies to be dragged and dropped

    But slapping "draggable()" inside that last chain doesn't work. Neither of these variations work:

    $(dropped).clone().draggable().appendTo(this);
    $(dropped).clone().appendTo(this).draggable();


    (cross-post: '[info]'javascript, '[info]'webdesign )

    Source: http://community.livejournal.com/webdesign/1355603.html

« webcrush updated to 0.3 || CSS menu help? »


antivirus | apache | asp | blogging | browser | bugtracking | cms | crm | css | database | ebay | ecommerce | google | hosting | html | java | jsp | linux | microsoft | mysql | offshore | offshoring | oscommerce | php | postgresql | programming | rss | security | seo | shopping | software | spam | spyware | sql | technology | templates | tracker | virus | web | xml | yahoo | home