如何制作拖放jquery？

Posted 2023-05-08

【中文标题】如何制作拖放jquery？

【英文标题】：how to make drag and drop jquery?

【发布时间】：2016-06-02 20:54:34

【问题描述】：

我一直在想如何用jQuery进行拖放，因为使用javascript拖放很难，我更喜欢使用jQuery而不是javascript。我想要的是子 div 是可拖动的，并且只能在父 div 中放置。当子 div 被丢弃时，如果它不在父 div 中，那么它将恢复到它所在的最后一个父 div。如果子 div 被丢弃在父 div 中，那么它将转到左上角它被放入的父 div。子 div 只能拖动。 我可以使用 jQuery UI，但我无法让 .droppable() 函数工作。

HTML：

<div id="div1" class="div">
<div id="image" class="image"></div>
</div>
<div id="div2" class="div">
</div>

CSS：

.div 
     float: left;
     margin-left: 5px;
     height: 200px;
     width: 200px;
     border: 3px solid black
        
.image 
      height: 50px;
      width: 50px;
      background-color: khaki;
    

jQuery（仅拖动）：

    $("document").ready(function() 
    $(".image").draggable();
);

jsfiddle：https://jsfiddle.net/j9pvbuue/8/ 如果你能直接给我一个答案代码，我将非常感激，而不是间接的答案告诉我如何使用它。

【参考方案1】：

jQuery 没有draggable API。

您可以使用jQuery UI draggable 和jQuery UI droppable 或使用html5 Drag and Drop API。

更新

根据原问题的更新描述，演示解决方案代码：

$("document").ready(function() 
  $(".child").draggable(
    revert: true
  );

  $(".parent").droppable(
    accept: '.child',
    drop: function(event, ui) 
      $(this).append($(ui.draggable));
    
  );
);

 .parent 
   float: left;
   margin-left: 5px;
   height: 200px;
   width: 200px;
   border: 3px solid black
 
 .child 
   height: 50px;
   width: 50px;
   background-color: khaki;
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>


<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
</div>
<div class="parent">
</div>

【讨论】：

我要做的是有一个助手，它是原始div的克隆，能够移动到另一个div，或div2，并在div2中调整到特定位置div2，如果没有落在 div2 的某个区域，则返回。同样适用于 div1。

@RandomChannel 你的意思是这样工作吗：jsfiddle.net/kding007/g2efds1z/1

不，这和我说的完全一样。我所要求的是找到一种方法将具有“图像”类的 div 拖到 id 为“div2”的 div 中，并将具有“图像”类的 div 移动到 div 中的特定位置"div2" 的 id，并且可拖动的 div 返回到它最后所在的 div，如果没有放在另一个 div 内。

就像他说的，使用JQuery UI库就可以做到。

可以使用 .droppable() 方法，让“image”类的 div 只能拖放到父 div 的一定半径内，子 div 移动到父 div 中的特定位置。不过，我无法让这种方法发挥作用。

【参考方案2】：

你可以使用 javascript。

我的代码是通过 javascript：

var CloneElement=document.getElementByID("ElementID").clone(true);
document.getElementByID("TargetSectionID").appendChild(CloneElement);

【讨论】：

他明确表示他想使用 JQuery，而不是 javascript。