js 簡單的拖動效果

效果演示：

html:

divclass

="wrap"

>

<

divid

="boxmove"

style

="left:150px;top:150px;"

> movebox

div>

div>

css

#boxmove

js

var o,   //捕獲到的事件

x, //boxmove水平寬度
y; //boxmove垂直高度
function getobject(obj,e)
document.getelementbyid("boxmove").onmousedown = function(e);
document.onmousemove = function(dis)
if(!dis)

//設定boxmovebox樣式隨滑鼠移動而改變

"px";

o.style.top = dis.clienty - y + "px";};

document.onmouseup = function()

// document.all（ie）使用releasecapture解除繫結。

//其餘比方ff使用window物件針對事件的捕捉

document.all?o.releasecapture() : window.captureevents(

event.mousemove|event.mouseup)

o = ''; //還空物件
};

須要注意的是，由於須要更改div的left和top。

這兩個屬性須要以內聯方式給出，否則不行。

原文：參考文件：

簡單拖動效果

script varx,y,z,down false obj function init function moveit function stopdrag script div onmousedown init onmousemove moveit onmouseup stopdrag style...

純js實現積木（div）拖動效果

doctype html html lang en head meta charset utf 8 title 拖動 title style type text css style head body id content input type button value 獲取積木 id div3 b...

jquery easyui拖動效果

info start drag1 stop drag title 上面的 是jquery easyui demo中的乙個例子，把基本的拖動功能做了乙個簡單的介紹，下面是具體引數的詳細說明 方法 draggable options options是可選的引數 主要包括下面的屬性引數 handle 定義...