如何在css中使html元素可拖动?

ewm0tg9j  于 2023-02-01  发布在  其他
关注(0)|答案(1)|浏览(169)
    • 我的HTML是:**
<div>
   <img src="random image (doesn't matter)"></img>
</div>

我将如何使我的div拖动一样,设置draggable = "true";在html中,但我正在寻找一个css唯一的替代方案。

    • 我尝试过的:**

1.我看了一下https://css-tricks.com/books/greatest-css-tricks/draggable-elements/,但这个答案似乎太复杂了,我觉得可能有更好的解决方案。
1.另一个问题(Setting html tag attributes from css)是在css中设置HTML属性(在本例中为draggable),我不认为有可能看到答案。

4ioopgfo

4ioopgfo1#

仅使用CSS无法使HTML元素成为可拖动的。您需要使用JavaScript使元素成为可拖动的。您可以使用HTML5 draggable属性来实现此目的:

<div draggable="true">Your Content Here</div>

您还可以使用JavaScript库(如jQuery UI)使元素可拖动:

$( "#yourElement" ).draggable();

或者使用普通JavaScript并与HTML5拖放API交互:

const yourElement = document.querySelector('#yourElement');

yourElement.addEventListener("dragstart", function(event) {
  event.dataTransfer.setData("text", event.target.id);
});

注意:有很多方法可以使元素成为可拖动的,具体的实现取决于您的需求和您想要支持的拖放交互的复杂性。

相关问题