CODEWITHSUNDEEP
javascriptjquerydrag-and-drop
TERO
TERO

Reputation: 159

jQuery: drag/drop images inside div's with same class?

I'm trying to use the jquery drag and drop in my web application and drag and drop images in different div's with the same Class.

But when I drag and drop the images onto one of the Div's, it will copy the same image into other div's with the same class as well!

I have created a jsfiddle to demonstrate the issue:

http://jsfiddle.net/7nwhs3my/

and this is my entire code:

$(document).ready(function () {

    var x = null;

    //Make element draggable
    $(".drag").draggable({

        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit',
        stack: '.drag',
        revert: "invalid"


    });

            $(".droppable").droppable({



                    drop: function (e, ui) {

                    if ($(ui.draggable)[0].id != "") {
                        x = ui.helper.clone();
                        ui.helper.remove();




                    x.draggable({

                        //helper: 'original',
                        containment: '.droppable',
                        tolerance: 'fit',
                        stack: '.drag'



                    });

                    x.resizable({

                      animate: true,
                      //aspectRatio: 16 / 9,

                      helper: "ui-resizable-helper",
                      handles: "n, e, s, w, nw, ne, sw,se"

                    });
                    x.appendTo('.droppable');
                    $("#tools").show();
                    $("#logo").hide();
                    $("#thumbs").show();

                }

                }

            });


});

I also tried to use something like this:

$(".droppable").this.droppable({

or this:

$(".droppable").droppable[0]({

but I don't think I am approaching it correctly because they stop my entire code functioning.

any advise/help would be appreciated.

Edit:

I've added this: $(ui.draggable).appendTo( this ); to my code but this will remove stop the images from being drag-able after they have been dropped!

Upvotes: 0

Views: 1350

Answers (1)

Richard Abercrombie
Richard Abercrombie

Reputation: 313

Try something like this, Hopefully it's more what you are looking for

$(document).ready(function () {

    var x = null;

    //Make element draggable
    $(".drag").draggable({

        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit',
        stack: '.drag',
        revert: "invalid"


    });

            $(".droppable").droppable({

                    drop: function (e, ui) {
                        x = ui.helper.clone().css({position: 'absolute', left: 0, top: 0});
                        ui.helper.remove();

                        x.draggable({

                        //helper: 'original',
                        containment: $(this).closest('droppable'),
                        tolerance: 'fit',
                        stack: '.drag'



                    });

                    x.resizable({

                      animate: true,
                      //aspectRatio: 16 / 9,

                      helper: "ui-resizable-helper",
                      handles: "n, e, s, w, nw, ne, sw,se"

                    });
                    x.appendTo($(this));
                    $("#tools").show();
                    $("#logo").hide();
                    $("#thumbs").show();

                }



            });


});

Upvotes: 1

Related Questions