js完美的div拖拽范例代码

发布时间：2023-09-25 15:36:07 所属栏目：教程来源：

导读：代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>拖拽库</title>

<style type="text/css">

div,h2,p{margin:0;padding:0;}

body{font:14px/1.5 arial;}

#box{width:100px;height:100px;background:#fef4eb;padding:5px;margin:50px;border:1px solid #f60;}

#box .title{height:25px;background:#f60;}

#tool{margin-bottom:10px;}

</style>

<script type="text/javascript">

function Drag()

{

//初始化

this.initialize.apply(this, arguments)

}

Drag.prototype = {

//初始化

initialize : function (drag, options)

{

  this.drag = this.$(drag);

  this._x = this._y = 0;

  this._moveDrag = this.bind(this, this.moveDrag);

  this._stopDrag = this.bind(this, this.stopDrag);

  this.setOptions(options);

  this.handle = this.$(this.options.handle);

  this.maxContainer = this.$(this.options.maxContainer);

  this.maxTop = Math.max(this.maxContainer.clientHeight, this.maxContainer.scrollHeight) - this.drag.offsetHeight;

  this.maxLeft = Math.max(this.maxContainer.clientWidth, this.maxContainer.scrollWidth) - this.drag.offsetWidth;

  this.limit = this.options.limit;

  this.lockX = this.options.lockX;

  this.lockY = this.options.lockY;

  this.lock = this.options.lock;

  this.onStart = this.options.onStart;

  this.onMove = this.options.onMove;

  this.onStop = this.options.onStop;

  this.handle.style.cursor = "move";

  this.changeLayout();

  this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag))

},

changeLayout : function ()

{

  this.drag.style.top = this.drag.offsetTop + "px";

  this.drag.style.left = this.drag.offsetLeft + "px";

  this.drag.style.position = "absolute";

  this.drag.style.margin = "0"

},

startDrag : function (event)

{

  var event = event || window.event;

  this._x = event.clientX - this.drag.offsetLeft;

  this._y = event.clientY - this.drag.offsetTop;

  this.addHandler(document, "mousemove", this._moveDrag);

  this.addHandler(document, "mouseup", this._stopDrag);

  event.preventDefault && event.preventDefault();

  this.handle.setCapture && this.handle.setCapture();

  this.onStart()

},

moveDrag : function (event)

{

  var event = event || window.event;

  var iTop = event.clientY - this._y;

  var iLeft = event.clientX - this._x;

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!