如何进行拖放jquery？

Question

我一直想知道如何使用 jQuery 进行拖放，因为使用 javascript 拖放很难，而且我更喜欢使用 jQuery 而不是 javascript。我想要的是子 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 没有draggableAPI。

您可以使用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>