开始拖动(dragstart事件)

把拖动的数据存入DataTransfer(setData()方法)。DataTransfer对象专门用来存储拖放时要携带的数据,它可以被设置为拖放事件对象的dataTransfer属性。
setData有两个参数:
第一个参数为携带数据的数据种类的字符串,只能填入类似”text/plain” 或”text/html”的表示MIME类型的文字,不能填入其他文字。
第二个参数为要携带的数据

preventDefault()

必须在dragend和dragover事件内调用“事件对象.preventDefault()”方法。因为在默认情况下,拖放的目标元素是不允许接受元素的,为了把元素拖放到其中,必须把默认处理给关掉

目标元素使用getData()方法

目标元素接受到被拖放的元素后,执行getData()方法从DataTransfer 那里获得数据。
getData()方法的参数为setData()方法中指定的数据类型
 
注意!
要实现拖放过程,还必须在目标元素的drop事件中关闭默认处理(拒绝被拖放),否则目标元素不能接受被拖放的元素。
要实现拖放过程,还必须设定整个页面为不执行默认处理(拒绝被拖放),否则拖放处理也不能被实现。因为页面是先于其他元素接受拖放的,如果页面拒绝拖放,那么其他页面上的元素也不能接受拖放。

时间: 2024-10-05 04:33:12

开始拖动(dragstart事件)的相关文章

UIButton拖动响应事件,距离问题

问题描述: 最近开发遇到个问题,就是UIButton响应了UIContolEventTouchDragEnter.UIControlEventTouchDragExit事件后,在拖出按钮的时候不会立即响应事件,而是真正超出70px的才会响应. 猜测苹果这样做的原因是估计到小按钮手指点击容易有抖动,会不小心有移出按钮的误操作. 效果是这样的:(盗个图) 解决办法: 响应UIContolEventTouchDragInside.UIControlEventTouchDragOutSide方法(大家会

unity中 UGUI的按下、拖动接口事件的实现

using UnityEngine; using System.Collections.Generic; using DG.Tweening; using UnityEngine.EventSystems; using UnityEngine.UI; public class testUI : MonoBehaviour, IPointerClickHandler, IPointerDownHandler, IPointerUpHandler, IDragHandler, IEndDragHan

运用HTML5原生拖动事件(drag)实现拖动效果

拖动效果相信很多朋友都自己写过,不管你用原生JS还是Jquery要实现起来也很简单,但是今天我想介绍的是运用HTML5标准中定义的原生拖动事件实现拖动效果. 一.背景: 其实说是HTML5标准定义,其实最早在IE4中就有拖放功能的API,只是在IE4中,网页中只有两种对象可以拖放:图像和某些文本.并且在IE4中唯一有效的放置目标是文本框.到了IE5.5,拖放功能得到了扩展,让网页中的任何元素都可以拖放.最终HTML5以IE的实力为基础制定了拖放规范.FF3.5+,Safari3+和Chrome根

解决JavaScript拖动时同时触发点击事件的BUG

在做在线地图项目的时候,在给marker点绑定事件时,因为有点击事件click,同时又存在拖动dragEnd事件,首先没有重大缺陷,就是在用户在点击的时候,有时候本想是点击,但是他触发了drag的事件,造成不好的用户体验 bug的原因 一个完整的click事件是包含 mousedown,mouseup 两个事件的,而拖拽一个元素时,包含下面三个事件: mousedown,mousemove,mouseup, 所以我们在拖拽一个元素结束后,如果此元素上面绑定了点击事件, 就会同时触发元素的点击事件

javascript高级程序设计---拖拉事件

拖拉事件 拖拉指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括Element节点.图片.链接.选中的文字等等.在HTML网页中,除了Element节点默认不可以拖拉,其他(图片.链接.选中的文字)都是可以直接拖拉的.为了让Element节点可拖拉,可以将该节点的draggable属性设为true. <div draggable="true"> 此区域可拖拉 </div> draggable属

drag事件

<!DOCTYPE HTML><html>  <head>      <title>拖动事件</title>    <style>        *{padding: 0;margin:0}        body{font-size:14px;font-family: "微软雅黑";background:#333}        #box1{width:60px;height:80px;background:#8

HTML5拖放事件(Drag-and-Drop,DnD)

拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放是在“拖放源(drag source)”和“拖放目标(drop target)”之间传输数据的用户界面.下面例子将演示如何创建自定义拖放源和自定义拖放目标,前者传输数据而不是其文本内容,后者以某种方式相应拖放数据而不是仅显示它. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 注释:在

html5 拖放事件

1.设置元素可拖拽属性:draggable true表示可拖拽. false表示不可拖拽. auto默认值,img和带href属性的a标签则表示可拖拽,其他标签表示不可被拖拽. 其他值表示不可拖拽. 兼容FF:需要在ondragstart事件中设置ev.dataTransfer.setData("",""),元素才可以被拖拽. 2.拖拽元素事件: dragstart:拖拽前触发,即鼠标按下,被拖拽元素被拖拽的瞬间触发. event.dataTransfer的大部分设

DOM事件类型详解

一.表单事件: input事件当<input>.<textarea>的值发生变化时触发.此外,打开contenteditable属性的元素,只要值发生变化,也会触发input事件.input事件的一个特点,就是会连续触发,比如用户每次按下一次按键,就会触发一次input事件. select事件当在<input>.<textarea>中选中文本时触发. Change事件当<input>.<select>.<textarea>