HTML中的Drag和Drop

最新推荐文章于 2023-03-23 21:23:29 发布

一路斜阳

最新推荐文章于 2023-03-23 21:23:29 发布

阅读量697

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/zhaoruda/article/details/88764757

版权

HTML5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML中的Drag和Drop

在HTML5中为元素添加了draggable属性用来表示元素是否可以拖动。而且该值必须设置为true，否则不生效。示例如下：

      function drop(event) {
        var elementId = event.dataTransfer.getData("dragElement");
        event.target.appendChild(document.getElementById(elementId));
      }

      function drag(event) {
        console.log('drag start');
        event.dataTransfer.effectAllowed = 'copy';
        event.dataTransfer.setData("dragElement", event.target.id);
      }

      function allowDrop(event) {
        console.log('drag over');
        event.dataTransfer.effectAllowed = 'copy';
        event.preventDefault();
      }
      
	<body>
		<div ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter()" ondragleave="dragLeave()"></div>
		<div id="dragElement" draggable="true" ondragstart="drag(event)" ondragend="dragEnd()" ondrag="onDrag()">Drag</div>
	</body>

其中主要涉及两个元素：被拖动元素（设置draggable属性）和拖放目标。

被拖动元素

包含的三个拖放事件：

ondragstart：按下鼠标并开始移动时触发该事件。
drag：在start事件触发后被触发，并在鼠标移动过程中不停被触发。
dragEnd：当拖动停止触发（无论把元素放到拖放目标上还是在无效目标上）
在dragStart事件触发时，还可以为被拖动元素指定effectAllowed。

拖放目标

拖放目标指的是在鼠标停止移动时被放置当目标。包含如下事件：

dragenter：被拖动元素进入目标时触发。
dragOver：被拖动元素在目标元素上移动时被触发。
dragleave：被拖动元素离开目标时触发。
drop：被拖动元素被放置在目标上时被触发。
注意：默认情况下目标元素是不允许被放置的，所以不会触发drop事件。这时需要在dropover中阻止默认行为才能成为被允许放置的目标。

dataTransfer对象

dataTransfer对象能够实现在拖放过程中数据的交换，它是事件对象的属性。主要方法：getData、setData、clearData和setDragImage（用于设置元素移动过程中的图像）

event.dataTransfer.setData("dragElement", event.target.id);

在元素开始拖动时调用setData方法将元素id保存起来，并命名为dragElement。

event.dataTransfer.getData("dragElement")

在元素停止拖动时调用getData方法获取保存的数据，该方法只接受一个参数，也就是调用setData时的第一个参数。

一路斜阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中的Drag和Drop

HTML中的Drag和Drop在HTML5中为元素添加了draggable属性用来表示元素是否可以拖动。而且该值必须设置为true，否则不生效。示例如下： function drop(event) { var elementId = event.dataTransfer.getData("dragElement"); event.target.appe...
复制链接

扫一扫