新浪博客

H5拖放效果-自由拖动的div元素

2018-04-25 16:04阅读：

http://blog.sina.cn/dpool/blog/u/2935488781

1.启动拖动：将元素draggable属性值设为true 2.为被拖动元素的ondragstart事件指定监听器，在该操作中让拖动操作可携带数据 3.在放的效果中，为document的ondragover事件指定监听器， 在监听器中取消document对拖动事件的默认行为 4.不同浏览器对拖放操作的默认动作并不相同，如果开发者希望取消拖放操作的默认动作 可为document的ondrop事件绑定监听器，取消事件的默认行为

var source = document.getElementByIdx_x_x_x('source'); source.ondragstart = function(evt){ //让拖动操作携带数据 evt.dataTransfer.setData('text','www.fkjave.org'); } document.ondragover = function(evt){ //取消事件的默认行为 return false; }
document.ondrop = function(evt){ source.style.position = 'absolute'; source.style.left = evt.pageX + 'px'; source.style.top = evt.pageY + 'px'; /
/取消事件的默认行为 return false;
}
拖放触发的拖放事件有一个dataTransfer属性，该属性值是一个dataTransfer对象，该对象属性方法： dataTransfer.dropEffect:设置或返回拖放目标上允许发生的行为。该值只能是none、copy、 link、move四个值之一。如果不是四值之一，拖放操作将会失败 dataTransfer.effectAllowde：设置或返回被拖动元素允许发生的拖动行为。值可设置为 none、copy、copeLink、copeMove、link、linkMove、move、all、uninitialized dataTransfer.items：该属性返回DataTransferItems对象，该对象代表了拖动数据。 dataTransfer.setDragImage(element,x,y)：设置拖放操作的自定义图标。其中element设置自定义 图表，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离 dataTransfer.addElement(element)：添加自定义图标 dataTransfer.types：返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有 类型 dataTransfer.getData(format):获取dataTransfer对象中format格式的数据 dataTransfer.setData(format,data):向dataTransfer对象中设置format格式的数据。其中 format代表数据格式，data代表数据 dataTransfer.clearData([format])：清楚dataTransfer对象中format格式的数据。省略format格 式，则意味着清楚dataTransfer对象中的全部数据。 通过dataTransfer对象，可以让拖放操作实现更丰富的功能，在拖放开始时（ondragstart事件）， 将拖放源的数据存入dataTransfer对象中，然后在拖放结束时，从dataTransfer对象中 读取数据，这样可以完成更复杂的拖放操作。
javascript讲义

我的更多文章

下载客户端阅读体验更佳

APP专享