可拖动的HTML元素

Question

我希望用户能够通过拖动鼠标将HTML元素移动到另一个内部。 （例如，移动黄色方块内的红色方块）

＆＃13;

＆＃13;

<div style="width:100px;height:100px;background-color:yellow">
<div style="width:10px;height:10px;background-color:red">
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是一个使用名为Draggabilly的简单且流行的库的示例，该库不需要jQuery。

＆＃13;

＆＃13;

window.onload = function() {
  var draggie = new Draggabilly('.draggable', {
    containment: true
  });
};

＆＃13;

.container {
  background-color: yellow;
  height: 100px;
  width: 100px;
}

.draggable {
  background-color: red;
  height: 10px;
  width: 10px;
}

＆＃13;

<!-- Based on the Draggabilly containment example using jQuery - http://codepen.io/desandro/pen/azRmYv -->

<script src="https://npmcdn.com/draggabilly@2.1/dist/draggabilly.pkgd.min.js"></script>

<div class="container">
  <div class="draggable"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

注意：如果您决定使用jQuery，可以简化JavaScript：

$(function(){
  $('.draggable').draggabilly({
    containment: true
  });
});