<分区>
我想要一个可以自由 float 的 HTML div。无论其他元素如何，都可以拖动和放置在任何地方。该元素可能会挡住下方元素的 View ，这没有问题。最小化功能也很好。有没有这方面的图书馆。
Google 搜索结果中的元素可以从一个位置拖动并放入另一个位置。找不到任何免费的 float 图书馆。
<分区>
我想要一个可以自由 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>关于javascript - 如何在 HTML 中绘制可拖动的小部件，最好使用 Angular ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37407620/