在 jQuery 的帮助下拖放

Question

我希望能够使用 jQuery 的可拖动功能将一个对象移动到另一个对象中。 我可以在容器中移动一个对象并且能够在其中移动。 但是当我尝试向要移动的对象添加助手时，这不再有效。 我希望当我选择一个项目将其存放在我的容器中时，它会自我复制。 以下是我目前设法做的事情：

JSFiddle

$(".drag").draggable({
    opacity: 0.7,
    snap: '#drop',
    cursor: "move",
    revert: "invalid",
    //helper: "clone"
});

$("#drop").droppable({
    drop: function(event, ui) {

    }
});

<div class="drag">
    <p>Exemple bloc</p>
</div>
<div class="drag">
    <p>Exemple bloc</p>
</div>


<div id="drop">
   <p>Drop here</p>
</div>

我存放在.drop克隆中的元素，必须能够在容器.drop中移动

Answer 1

这个working demo可以帮助你

HTML

<div id="wrapper">
    <div id="origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
        <img src="http://placehold.it/150x100" id="two" title="two" class="draggable" />
        <img src="http://placehold.it/160x100" id="three" title="three" />
    </div>
    <p>CONTAINAIR</p>
    <div id="drop" class="fbox">

    </div>
</div>

JAVASCRIPT

    $(".draggable").draggable({ cursor: "crosshair", revert: "invalid"});

$("#drop").droppable({ accept: ".draggable",

  drop: function(event, ui) {

    console.log("drop");

    $(this).removeClass("border").removeClass("over");

    var dropped = ui.draggable;
    var droppedOn = $(this);

    $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
  },

  over: function(event, elem) {

    $(this).addClass("over");

    console.log("over");

  },

  out: function(event, elem) {

    $(this).removeClass("over");

  }

});

$("#drop").sortable();

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

  console.log("drop");

  $(this).removeClass("border").removeClass("over");

  var dropped = ui.draggable;
  var droppedOn = $(this);

  $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);

}});

CSS

#origin
{
  background-color: lightgreen;
}

#origin img, #drop img {
  margin-top: 3px;
  margin-left: 5px;
}

#drop
{
  background-color: red;
  min-height: 120px;
}
.over {
  border: solid 5px purple;
}
.draggable
{
  border: solid 2px gray;
}

Answer 2

我已经编辑了你的小提琴： http://jsfiddle.net/3tjbhjtq/54/ 这是代码：

$(".drag").draggable({

  opacity  : 0.7,
  snap     : '#drop',
  cursor   : "move",
  revert   : "invalid",
  helper   : "clone"

});

$("#drop").droppable({

  drop: function(event, ui) {

    var currenOffset = ui.offset;

    var dropedObjectCss = {
      "position" : "absolute",
      "left"     : currenOffset.left,
      "top"      : currenOffset.top
    };

    var tag = ui.draggable;

    if (tag.data('alreadydropped')) {
      var newItem = tag.css(dropedObjectCss).appendTo( this ); 

      newItem.draggable({
        opacity : 0.7,
        snap    : '#drop',
        cursor  : "move",
        revert  : "invalid"
      });

    } else {
      var newItem = tag.clone().css(dropedObjectCss).appendTo( this );

      newItem.data('alreadydropped', true).draggable({
        opacity : 0.7,
        snap    : '#drop',
        cursor  : "move",
        revert  : "invalid"
      });

    }
  }
});

这是您想要的结果吗？

我们的想法是当物品第一次被丢弃时我们应该有不同的行为 以及何时在容器中移动。这就是我们保持已删除数据的原因。 所以第一次（else 块）我们克隆对象并附加到容器和 设置已经下降为真。在此之后每次用户移动项目 我们将进入 if 条件，该项目不会被克隆，只会移动到容器中。

Answer 3

您需要在克隆项目后将draggable 函数应用于项目并为其添加一个类。如果该项目返回到初始位置后，您将其删除：

HTML 代码

<div id="container">
  <div class="drag">
    <p>Exemple bloc 1</p>
  </div>
  <div class="drag">
    <p>Exemple bloc 2</p>
  </div>
</div>

<div id="drop">
  <p>Drop here</p>
</div>

CSS 代码

#container{
  width: 100%;
}
.drag {
  height: 50px;
  width: 50px;
  background: #505050;
  color: #FFFFFF;
  padding: 10px;
  display: inline-block;
  margin: 0 10px 10px 10px;
}

#drop {
  width: 100%;
  height: 600px;
  background: #FFFFFF;
  border: 1px solid #999999;
}

jQuery 代码

makeDragable($(".drag"));

$("#drop").droppable({
  accept: ".drag",
  drop: function(event, ui) {

    if( $(ui.draggable).hasClass("cloned") ) {        
       $(ui.draggable).css(ui.offset).css("position", "absolute");      
       return;    
    }

    var item = $(ui.draggable).clone();
    item.addClass("cloned");
    $(this).append(item);
    makeDragable(item);
  }
});

$("#container").droppable({
  accept: ".cloned",
  drop: function(event, ui) {
    $(ui.draggable).detach();
  }
});

function makeDragable(item) {
  item.draggable({
    opacity: 0.7,
    cursor: "move",
    helper: "clone"
  });
}

jsfiddle