JS----div 层图片的拖放

最新推荐文章于 2019-06-21 17:26:54 发布

翻译最新推荐文章于 2019-06-21 17:26:54 发布 · 526 阅读

文章标签：

#图片的拖放

JScript.Jquery 专栏收录该内容

81 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现元素拖放功能的方法。通过具体代码示例展示了如何让页面元素具备拖拽功能，并能在指定区域内放置。此功能常用于直观交互界面的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>


<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="img/hl.jpg" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>