CODEWITHSUNDEEP
jqueryjquery-uidrag-and-drop
KalEl98
KalEl98

Reputation: 21

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

Upvotes: 2

Views: 2449

Answers (5)

saleem shaik
saleem shaik

Reputation: 1

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();

Upvotes: 0

KalEl98
KalEl98

Reputation: 1

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

Upvotes: 0

marcosfromero
marcosfromero

Reputation: 2853

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
                }
            });
        }

Upvotes: 2

mattsven
mattsven

Reputation: 23253

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

Upvotes: 0

Mottie
Mottie

Reputation: 86403

You should clone() the draggable object.

or better yet, use the helper clone option

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

Upvotes: 0

Related Questions