如何制作拖放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 draggable和jQuery UI droppable或使用HTML5 Drag and Drop API。

<强>更新

根据原始问题的更新说明，演示解决方案代码：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以使用javascript。

我的代码是通过javascript：

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