如何制作拖放jQuery

Question

我一直想知道如何使用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/如果您能直接给我一个答案的代码，而不是间接答案，告诉我如何使用它，我将不胜感激。

Answer 1

jQuery没有draggable的API。

您可以使用 jQuery UI 可拖动和 jQuery UI 可拖放HTML5也可以使用拖放 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>

Answer 2

你可以

使用javascript。

我的代码是通过JavaScript的：

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