手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript实现的元素拖动函数宿主为浏览器
javascript实现的元素拖动函数宿主为浏览器
摘要://宿主为浏览器//将相应的元素对象的引用传到函数中functioncandrag(drager){drager.onmousedown=f...

//宿主为浏览器 //将相应的元素对象的引用传到函数中 function candrag(drager) { drager.onmousedown = function (down) { var offx = drager.offsetLeft var offy = drager.offsetTop; var offxl = down.clientX - offx; var offyl = down.clientY - offy; window.condition = 0;//为window添加了condition属性,用于解决和click之间的矛盾 document.onmousemove = function (move) { drager.style.left = move.clientX - offxl + "px"; drager.style.top = move.clientY - offyl + "px"; drager.style.cursor = "move"; condition = Math.abs(move.clientX - down.clientX) + Math.abs(move.clientY - down.clientY); } } drager.onmouseup = function () { document.onmousemove = null; draggerr.style.cursor = "auto"; } } /*对于和click之间的矛盾解决,需要判断condition *例如: candrag(dragger); d01.onclick = function () { if (!condition) { d01.style.backgroundColor = "red"; } } *其中,d01为dragger的子元素 */

【javascript实现的元素拖动函数宿主为浏览器】相关文章:

Javascript实现div的toggle效果实例分析

javascript实现炫酷的拖动分页

javascript实现点击后变换按钮显示文字的方法

javascript删除元素节点removeChild()用法实例

javascript基于DOM实现省市级联下拉框的方法

javascript实现删除前弹出确认框

javascript实现模拟时钟的方法

js实现精美的图片跟随鼠标效果实例

javascript动态创建表格及添加数据实例详解

JavaScript实现带标题的图片轮播特效

精品推荐
分类导航