1

I am having some issues with drag, drop and positioning in jquery.

Here is what I am trying to achieve:

  1. You drag a clone of a div to another div which is the "stage"
  2. I need to position of the clone and not the original

Here is my attempt so far:

$(function() {

$("#workspacemaster").droppable({
accept: '.draggable',
drop: function(event, ui) 
{
}

});

// Make images draggable.
$("#draggable1").draggable({

    // Find original position of dragged image.
    start: function(event, ui) {

        // Show start dragged position of image.
        var Startpos = $(this).position();
        $("div#start1").text("1 START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
    },
    cursor: 'move',
    grid: [20, 20],

    // Find position where image is dropped.
    stop: function(event, ui) {

        // Show dropped position.
        var Stoppos = $(this).position();
        $("div#stop1").text("1 STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
    }
});

});

2 Answers 2

0

I think you should implement this on the droppable instead of the draggable

$('#workspacemaster').droppable({
  accept: '.draggable',
  drop: function(event, ui){
    //do something with $(ui.helper) or $(ui.draggable);
    // this is scoped to the droppable
  }
});
0

I did this for chrome, you're ganna have to make it cross-browser:

$(".draggable").draggable({
    helper:"clone",
    //this will take whatever css you have for .draggable and add opacity
    opacity:0.7
});


$('#workspacemaster').droppable(
  {
    accept: ".pageControl",
    drop: function(e,ui){
      $(this).append(
        $(ui.draggable).clone()
        .css({
          position:"absolute",
          top: e.clientY-e.offsetY,
          left: e.clientX-e.offsetX
        })
       .draggable({containment:"parent"}) 
      );
    }
  }
);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.