javascript实现的元素拖动函数宿主为浏览器_javascript技巧
程序员文章站
2022-04-21 12:28:00
...
//宿主为浏览器 //将相应的元素对象的引用传到函数中 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的子元素 */
上一篇: php封装的数据库函数与用法示例【参考thinkPHP】
下一篇: php foreach 报 “Cannot create references to elements of ...”的解决方法
推荐阅读
-
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异_javascript技巧
-
用js判断是否为360浏览器的实现代码_javascript技巧
-
为非IE浏览器添加mouseenter,mouseleave事件的实现代码_javascript技巧
-
为非IE浏览器添加mouseenter,mouseleave事件的实现代码_javascript技巧
-
判断数组是否包含某个元素的js函数实现方法_javascript技巧
-
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)_javascript技巧
-
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)_javascript技巧
-
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)_javascript技巧
-
JavaScript实现跨浏览器的添加及删除事件绑定函数实例_javascript技巧
-
javascript实现的元素拖动函数宿主为浏览器_javascript技巧