Jquery Ui Drag and drop problem

问题

I´m developing a single toolbar plugin with jquery and drag and drop functionality from jquery ui. The idea is as follows: i have a list (ul) and items (li) where each of them represents a tool like text, geometric figure, etc. so. when i drag a tool and then drop it on the conteiner a 'widget' must be created. The problem is after the tool was dropped on container it is not longer available from drag and drop. Drag and drop functionality works just once.

Hope you can helpme. Sorry for my english.

here is the code

the plugin

    (function($){

//Attach this new method to jQuery
$.fn.extend({ 

    //This is where you write your plugin's name
    spkToolbar: function(options) {

        //Set the default values, use comma to separate the settings, example:
        var defaults = {
            isDraggable:false
            ,droppableDiv:undefined
        };

        var options =  $.extend(defaults, options);
        //Iterate over the current set of matched elements
        return this.each(function() {
            var o = options;
            $(this).addClass('toolbar');
            if(o.isDraggable)
                $('.toolbar').draggable();
            $(this).addClass('spkToolbar');

            var obj = $(this);              

            //Get all LI in the UL
            var items = $("ul li", obj);
            items.draggable({ appendTo: "body",helper: 'clone' });
            if(o.droppableDiv!=undefined){
                $(o.droppableDiv).droppable({
                    drop: function( event, ui ) {
                        // some extra code for proper widget creation
                    }
                });
            }
        });
    }
});
})(jQuery);

the html

<div id="toolbar">
    <ul>
        <li id="save" title="Guardar cambios"><img src="<c:url value="images/toolbar/save.png" />" /></li>
    </ul>
</div>

usage:

 jQuery('#toolbar').spkToolbar({droppableDiv:'#new-dropcontainer'});

almost i forget, i use jquery 1.5 and jquery ui 1.8.1

Thanks in advance

回答1:

Here's a working version of your code: http://jsfiddle.net/marcosfromero/YRfVd/

I added this HTML:

<div id="new-dropcontainer">
    <ul>
    </ul>
</div>

with this associated JavaScript:

        if(o.droppableDiv!=undefined){
            $(o.droppableDiv).droppable({
                drop: function( event, ui ) {
                    // clone the original draggable, not the ui.helper
                    // and append it to the ul element inside new-dropcontainer
                    jQuery('#new-dropcontainer ul').append(ui.draggable.clone());
                    // some extra code for proper widget creation
                }
            });
        }

回答2:

You should clone() the draggable object.

or better yet, use the helper clone option

$( ".selector" ).draggable({ helper: 'clone' });

回答3:

Why not just partially fade out the clicked on icon, clone it, and initiate a drag & drop on the cloned element?

回答4:

Just in case, i´ve changed the version of jquery from 1.5 to 1.4.1 and it worked. I don´t know why..

Thanks to all

回答5:

I have faced the drag and drop item positioning problem.When I try to drag and drop an item instead of the item get appended it was always positioning at the top.this is the soultion I got for this.Hope it is helpful.

$(".zone1, .zone2").sortable({
            connectWith: ".test",
            cursor: 'pointer',
            over: function (event, ui) {
                        ui.placeholder.appendTo(ui.placeholder.parent());
                }
            }
        }).disableSelection();

来源：https://stackoverflow.com/questions/5347295/jquery-ui-drag-and-drop-problem

标签

jquery

jquery-ui

drag-and-drop