在 jQuery 的帮助下拖放

Posted 2023-05-08

【中文标题】在 jQuery 的帮助下拖放

【英文标题】：Drag and drop with the help of jQuery

【发布时间】：2016-04-09 02:26:23

【问题描述】：

我希望能够使用 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中移动

【问题讨论】：

Fiddle 不错，但也请贴出相关代码。

代码已添加，谢谢

When I make a draggable clone and drop it in a droppable I cannot drag it again 的可能重复项。这是一个 DEMO 根据那里给出的解决方案为您提供..

这个working demo可以帮助你

感谢 Guruprasad Rao，但一旦进入容器我们就无法移动项目

【参考方案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;

【参考方案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 条件，该项目不会被克隆，只会移动到容器中。

【讨论】：

差不多了，已经存放的元素在容器中不能再移位了，那就是我的问题了。

我已经更改了小提琴和代码。再次检查。现在它留在被丢弃的同一个地方。我不明白。要将元素移回旧位置？

以我给出的例子为例，除了我存放在.drop克隆中的元素并且必须能够在容器中移动.drop

这正是我想要的。你能解释一下吗？谢谢

再次检查答案。

【参考方案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