javascript - 如何在HTML中绘制可拖动的小部件，最好使用angular？

Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。












想改善这个问题吗？更新问题，以便将其作为on-topic用于堆栈溢出。

4年前关闭。



Improve this question




我想要一个可以自由 float 的HTML div。可以在任何其他位置拖动和定位。该元素可能会阻挡下面的元素的 View ，这没有问题。最小化功能也将是不错的。有没有这个图书馆。

Google搜索产生的项目可以从一个位置拖动到另一个位置。找不到任何免费的 float 库。

最佳答案

您必须使用draggable属性和javascript中的一些逻辑。
(我使用的是js而不是angularjs，所以这可能不是您的答案)
代码会像

function drag_start(event) {
  var style = window.getComputedStyle(event.target, null);
  event.dataTransfer.setData("text/plain", (parseInt(style.getPropertyValue("left"), 10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"), 10) - event.clientY) + ',' + event.target.getAttribute('data-item'));
}

function drag_over(event) {
  event.preventDefault();
  return false;
}

function drop(event) {
  var offset = event.dataTransfer.getData("text/plain").split(',');
  var dm = document.getElementsByClassName('dragme');
  dm[parseInt(offset[2])].style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
  dm[parseInt(offset[2])].style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
  event.preventDefault();
  return false;
}

var dm = document.getElementsByClassName('dragme');
for (var i = 0; i < dm.length; i++) {
  dm[i].addEventListener('dragstart', drag_start, false);
  document.body.addEventListener('dragover', drag_over, false);
  document.body.addEventListener('drop', drop, false);
}

div {
  position: absolute;
  left: 0;
  top: 0;
  /* set these so Chrome doesn't return 'auto' from getComputedStyle */
  width: 200px;
  background: rgba(255, 255, 255, 1);
  border: 2px solid rgba(0, 0, 0, 1);
  border-radius: 4px;
  padding: 8px;
}

body,
html {
  min-height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div draggable="true" class="dragme" data-item="0">Drag me</div>