在 jQuery 的帮助下拖放

Question

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

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

我已经编辑了你的fiddle： 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 块）我们克隆对象并附加到容器和将 alreadydropped 设置为 true。此后每次用户移动项目时我们将进入 if 条件，并且该项目不会被克隆，只会被移动到 contaner 中。

Answer 2

这篇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 3

您需要在克隆后的项目上应用draggable功能并为其添加class。如果项目返回到初始位置，则将其删除：

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

在 jQuery 的帮助下拖放

Drag and drop with the help of jQuery

javascript

jquery

drag-and-drop

drag