jquery - 如何拖放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 .

更新

根据原题更新描述，demo解法代码:

$("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>