Question

我在jquery中遇到拖拽，拖放和定位问题。

这是我想要实现的目标：

您将div的克隆拖到另一个div，即“舞台”
我需要克隆的位置，而不是原始的

到目前为止，这是我的尝试：

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

});

Answer 1

我认为你应该在droppable而不是draggable

上实现这个

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

Answer 2

我为chrome做了这个，你必须让它跨浏览器：

$(".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"}) 
      );
    }
  }
);

Jquery拖放问题与位置，帮助！

2 个答案: