js完美的div拖拽实例代码(2)

日期：2020-06-11 栏目：程序人生浏览：次

//应用
window.onload = function ()
{
var oBox = document.getElementById("box");
var oTitle = oBox.getElementsByTagName("h2")[0];
var oSpan = document.getElementsByTagName("span")[0];
var oDrag = new Drag(oBox, {handle:oTitle, limit:false});

var aInput = document.getElementsByTagName("input");

//锁定范围接口
aInput[0].onclick = function ()
{
  oDrag.limit = !oDrag.limit;
  this.value = oDrag.limit ? "取消锁定范围" : "锁定范围"
};

//水平锁定接口
aInput[1].onclick = function ()
{
  oDrag.lockX = !oDrag.lockX;
  this.value = oDrag.lockX ? "取消水平锁定" : "水平锁定"
};

//垂直锁定接口
aInput[2].onclick = function ()
{
  oDrag.lockY = !oDrag.lockY;
  this.value = oDrag.lockY ? "取消垂直锁定" : "垂直锁定"
};

//锁定位置接口
aInput[3].onclick = function ()
{
  oDrag.lock = !oDrag.lock;
  this.value = oDrag.lock ? "取消锁定位置" : "锁定位置"
};

//开始拖拽时方法
oDrag.onStart = function ()
{
  oSpan.innerHTML = "开始拖拽"
};

//开始拖拽时方法
oDrag.onMove = function ()
{
  oSpan.innerHTML = "left:" + this.drag.offsetLeft + ", top:" + this.drag.offsetTop
};

//开始拖拽时方法
oDrag.onStop = function ()
{
  oSpan.innerHTML = "结束拖拽"
};
};
</script>
</head>
<body>
<div>
<input type="button" value="锁定范围" />
    <input type="button" value="水平锁定" />
    <input type="button" value="垂直锁定" />
    <input type="button" value="锁定位置" />
</div>
<p>拖放状态：<span>未开始</span></p>
<div>
<h2></h2>
</div>
</body>
</html>
</td>
   </tr>
</table>

转载注明出处：https://www.heiqu.com/wdypgj.html

js完美的div拖拽实例代码(2)

相关推荐