首页 > 代码库 > Javascript学习------拖拽效果
Javascript学习------拖拽效果
<!DOCTYPE html><html><head> <title>js拖拽</title> <style> * { margin: 0px; padding: 0px; } .drafting { width: 450px; height: 350px; overflow: hidden; position: absolute; z-index: 1; margin: 0px; box-shadow: 0px 0px 5px #888; left: 0px; right: 0px; background: #ddd; padding: 1px; } .drafting .dra-top { height: 45px; background: #ddd; cursor: move; line-height: 45px; } .drafting .dra-content { height: 285px; overflow: hidden; padding: 10px; background: #fff; } </style></head><body> <div class="drafting" id="drafting"> <div class="dra-top" id="dramove">求拖我</div> <div class="dra-content">内容在这里</div> </div> <span id="span" style="position:relative;z-index:2;"></span> <script type="text/javascript"> var dra = { //初始化 config: { dom: document.getElementById("drafting"),//拖拽容器 dom1: document.getElementById("dramove"),//拖拽dom domw: document.getElementById("drafting").scrollWidth, domh: document.getElementById("drafting").scrollHeight, startleft: 0,//起始left位置 starttop: 0,//起始top位置 endleft: 0,//结束left位置 endtop: 0,//结束top位置 x: 0,//鼠标相对窗口x坐标 y: 0,//鼠标相对窗口y坐标 clientX: 0,//起始鼠标位置 clientY: 0//起始鼠标位置 }, clearselect: window.getSelection ? function () { window.getSelection().removeAllRanges(); } : function () { document.selection.empty(); },//清空用户文体选中 //事件绑定 init: function () { var ts = this; ts.config.startleft = ts.config.dom.offsetLeft; ts.config.starttop = ts.config.dom.offsetTop; ts.config.dom1.onmousedown = function (e) { e = e || window.event; ts.config.clientX = e.clientX; ts.config.clientY = e.clientY; ts.config.x = ts.config.clientX - ts.config.startleft; ts.config.y = ts.config.clientY - ts.config.starttop; //document.getElementById("span").innerText = ts.config.domw + "," + ts.config.domh; document.onmousemove = function () { ts.movestart(); } document.onmouseup = function () { ts.moveend(); } }; }, movestart: function (e) { var ts = this; e = e || window.event; var x = ts.config.clientX - e.clientX;//x移动距离 var y = ts.config.clientY - e.clientY;//y移动距离 ts.config.endleft = ts.config.startleft - x; ts.config.endtop = ts.config.starttop - y; var clienth = document.documentElement.clientHeight || document.body.clientHeight; //当前页面可视高度 var clientw = document.documentElement.clientWidth || document.body.clientWidth; //当前页面可视高度 //判断临界点 ts.config.endleft = ts.config.endleft <= 0 ? 0 : ts.config.endleft; ts.config.endtop = ts.config.endtop <= 0 ? 0 : ts.config.endtop; if ((ts.config.endleft + ts.config.domw) >= clientw) { ts.config.endleft = clientw - ts.config.domw; } if ((ts.config.endtop + ts.config.domh) >= clienth) { ts.config.endtop = clienth - ts.config.domh; } ts.config.dom.style.left = ts.config.endleft + "px"; ts.config.dom.style.top = ts.config.endtop + "px"; ts.clearselect(); //document.getElementById("span").innerText = ts.config.clientX + "," + e.clientX; }, moveend: function () { var ts = this; ts.config.startleft = ts.config.endleft;//记录结束left位置 ts.config.starttop = ts.config.endtop;//记录结束top位置 document.onmousemove = null; document.onmouseup = null; return false; } } dra.init(); </script></body></html>
Javascript学习------拖拽效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。