HTML部分:
<div id="list-window"> <button id="fixButton" class="layui-btn layui-btn-danger"> <i class="layui-icon"></i> </button> <div id="fixR"> <div id="bar"><p>点击拖动该窗口</p></div> <div id="view"></div> </div> </div>
CSS:
#fixR{ position: absolute; right: 0px; overflow-y: auto; height: 300px; top: -2px; width: 605px; background-color: #e5e5e5; box-shadow: 0 0 8px rgba(0,0,0,.1); z-index: 10000; } #list-window { width:38px; height:38px; position: fixed; top:50%; right: 0px; z-index: 200; } #bar{ height:40px; width: 100%; color: #fff; background-color: #3c7bb8; text-align: center; line-height: 40px; }
Javascript:
var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false }; var getCss = function(o,key){ return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; }; var startDrag = function(bar, target, callback){ if(getCss(target, "left") !== "auto"){ params.left = getCss(target, "left"); } if(getCss(target, "top") !== "auto"){ params.top = getCss(target, "top"); } // bar.onmousedown = function(event){ params.flag = true; if(!event){ event = window.event; // bar.onselectstart = function(){ return false; } } var e = event; params.currentX = e.clientX; params.currentY = e.clientY; }; this.onmouseup = function(){ params.flag = false; if(getCss(target, "left") !== "auto"){ params.left = getCss(target, "left"); } if(getCss(target, "top") !== "auto"){ params.top = getCss(target, "top"); } }; this.onmousemove = function(event){ var e = event ? event: window.event; if(params.flag){ var nowX = e.clientX, nowY = e.clientY; var disX = nowX - params.currentX, disY = nowY - params.currentY; target.style.left = parseInt(params.left) + disX + "px"; target.style.top = parseInt(params.top) + disY + "px"; if (typeof callback == "function") { callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY); } if (event.preventDefault) { event.preventDefault(); } return false; } } };