『壹』 JS中的滑鼠事件，拖拽一個東西
<!DOCTYPEHTML>
<html>
<head>
<styletype="text/css">
#div1{width:288px;height:200px;padding:10px;border:1pxsolid#aaaaaa;}
</style>
<scripttype="text/javascript">
functionallowDrop(ev)
{
ev.preventDefault();
}
functiondrag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
functiondrop(ev)
{
ev.preventDefault();
vardata=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>請把圖片拖放到矩形中：</p>
<divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div>
<br/>
<imgid="drag1"src="http://www..com/img/bdlogo.gif"draggable="true"ondragstart="drag(event)"/>
</body>
</html>
設置元素為可拖放
首先，為了使元素可拖動，把 draggable 屬性設置為 true ：
<img draggable="true" />
拖動什麼 - ondragstart 和 setData()
然後，規定當元素被拖動時，會發生什麼。
在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。
dataTransfer.setData() 方法設置被拖數據的數據類型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。
放到何處 - ondragover
ondragover 事件規定在何處放置被拖動的數據。
默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。
這要通過調用 ondragover 事件的event.preventDefault() 方法：
event.preventDefault()
進行放置 - ondrop
當放置被拖數據時，會發生 drop 事件。
在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代碼解釋：
調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）
通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。
被拖數據是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標元素）中
『貳』 怎麼用 javascript 實現拖拽
javascript 實現拖拽實現原理。如下：
用JavaScript事件方法表示就是：
① onmousedown + onmousemove → startDrag()
② onmouseup → stopDrag()
1.首先調用js文件，如下：
<scriptsrc="http://www.zhangxinxu.com/study/js/zxx.drag.1.0.js"type="text/javascript"></script>
2.然後使用startDrag()方法綁定拖拽效果，startDrag()方法有兩個參數，第一個是點擊的對象（即點擊那裡可以實現拖拽，例如彈出層的標題欄），第二個是拖拽的對象（例如一個彈出層）。也就是startDrag(觸發拖拽對象，被拖拽對象)。
<styletype="text/css">
#box{position:absolute;left:100px;top:100px;padding:5px;background:#f0f3f9;font-size:12px;-moz-box-shadow:2px2px4px#666666;-webkit-box-shadow:2px2px4px#666666;}
#main{border:1pxsolid#a0b3d6;background:white;}
#bar{line-height:24px;background:#beceeb;border-bottom:1pxsolid#a0b3d6;padding-left:5px;cursor:move;}
#content{width:420px;height:250px;padding:10px5px;}
</style>
<divid="box">
<divid="main">
<divid="bar">拖拽</div>
<divid="content">
內容……
</div>
</div>
</div>
JS部分
<scriptsrc="http://www.zhangxinxu.com/study/js/zxx.drag.1.0.js"type="text/javascript"></script>
<scripttype="text/javascript">
varoBox=document.getElementById("box");
varoBar=document.getElementById("bar");
startDrag(oBar,oBox);
</script>
『叄』 js拖拽插件通過改變position或translate做位移，性能差距有多少
性能差距還是很大的特別是在移動設備上，因為大家都知道瀏覽器在處理這兩種樣式時的流水線不同。position更新進行 layout 重計算。而translate只需要對本元素的幾何數據點做偏移就好了。
不過性能最優的方式還是要為被拖拽的那個元素觸發composite layer（可以叫它合成層），因為現在瀏覽器一般都是 合成化渲染，並且大部分 光柵化（就是把元素形狀的幾何數據描述變成像素描述的過程，可以理解成矢量變成點陣圖）過程都是在CPU上進行的，如果不把被拖拽的那個元素觸發成為 合成層 那麼CPU就會重復的paint這個元素，這是不合理的(CPU paint的過程比較耗時)，所以應該讓CPU盡量少的paint這個元素，最好只paint一次，之後的拖拽（也就是位移，甚至是旋轉啊、縮放啊等這些仿射變換） 都可以直接交給GPU在合成（composited）的時候來做，這也就是所謂的硬體加速機制。
合成過程就是把幾個合成層（一個合成層可以是 一個元素或多個元素組合經過CPU 光柵化後得到的圖片）根據各個層的幾何頂點信息、矩陣描述、透明度、blend效果等信息使用GPU進行重新的光柵化渲染到一張直接投影到屏幕上的圖片上（幀緩沖區 framebuffer），然而這里的光柵化是非常快的，不同於CPU的那個光柵化的過程。原因大致如下：
一、因為這個時候的渲染只是把一張現成的點陣圖合成到一起（就像紋理貼圖，可以簡單理解成像素值的簡單計算和拷貝）。而不像CPU光柵化，它是將非常復雜的幾何數據（是由瀏覽器分析dom的css樣式所得到的）通過一系列復雜的邏輯計算後得到一個像素最後得到一張圖片。
二、因為GPU有非常多個處理單元在並行的處理這些簡單的渲染，它的計算吞吐量是很大的。而CPU的處理單元非常少，做強邏輯的計算非常適合，但是做這種簡單的加減乘除計算不如GPU快（人多力量大）。
『肆』 如何用javascript 實現拖拽
首先給dom元素添加draggable屬性，然後就可以通過javascript添加監聽事件
詳細測試代碼可參考MDN示例：https://developer.mozilla.org/zh-CN/docs/Web/Events/drag
『伍』 js怎麼實現頁面元素的拖拽功能
js實現一個拖拽事件的方法：
1、定義HTML
<div id="no-drop" class="draggable drag-drop"> #無拖動 </div>
<div id="yes-drop" class="draggable drag-drop"> #有拖動 </div>
<div id="outer-dropzone" class="dropzone">
#外層拖動
<div id="inner-dropzone" class="dropzone">#內層拖動</div>
</div>
2、定義css
/* 外層樣式定義 */
#outer-dropzone {
height: 140px;
}
#inner-dropzone {
height: 80px;
}
.dropzone {
background-color: #ccc;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
width: 80%;
transition: background-color 0.3s;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}
『陸』 js中sortable怎麼獲取拖動的東西
是jquery吧
所有的事件回調函數都有兩個參數：event和ui，瀏覽器自有event對象，和經過封裝的ui對象
ui.helper - 表示sortable元素的JQuery對象，通常是當前元素的克隆對象
ui.position - 表示相對當前對象，滑鼠的坐標值對象{top,left}
ui.offset - 表示相對於當前頁面，滑鼠的坐標值對象{top,left}
ui.item - 表示當前拖拽的元素
ui.placeholder - 佔位符（如果有定義的話）
ui.sender - 當前拖拽元素的所屬sortable對象（僅當元素是從另一個sortable對象傳遞過來時有用）
·參數（參數名 : 參數類型 : 默認值）
appendTo : String : 'parent'
Defines where the helper that moves with the mouse is being appended to ring the drag (for example, to resolve overlap/zIndex issues).
初始：$('.selector').sortable({ appendTo: 'body' });
獲取：var appendTo = $('.selector').sortable('option', 'appendTo');
設置：$('.selector').sortable('option', 'appendTo', 'body');
axis : String : false
如果有設置，則元素僅能橫向或縱向拖動。可選值：'x', 'y'
初始：$('.selector').sortable({ axis: 'x' });
獲取：var axis = $('.selector').sortable('option', 'axis');
設置：$('.selector').sortable('option', 'axis', 'x');
cancel : Selector : ':input,button'
阻止排序動作在匹配的元素上發生。
初始：$('.selector').sortable({ cancel: 'button' });
獲取：var cancel = $('.selector').sortable('option', 'cancel');
設置：$('.selector').sortable('option', 'cancel', 'button');
connectWith : Selector : false
允許sortable對象連接另一個sortable對象，可將item元素拖拽到另一個中。
初始：$('.selector').sortable({ connectWith: '.otherlist' });
獲取：var connectWith = $('.selector').sortable('option', 'connectWith');
設置：$('.selector').sortable('option', 'connectWith', '.otherlist');
containment : Element, String, Selector : false
約束排序動作只能在一個指定的范圍內發生。可選值：DOM對象, 'parent', 'document', 'window', 或jQuery對象
初始：$('.selector').sortable({ containment: 'parent' });
獲取：var containment = $('.selector').sortable('option', 'containment');
設置：$('.selector').sortable('option', 'containment', 'parent');
cursor : String : 'auto'
定義在開始排序動作時，如果的樣式。
初始：$('.selector').sortable({ cursor: 'crosshair' });
獲取：var cursor = $('.selector').sortable('option', 'cursor');
設置：$('.selector').sortable('option', 'cursor', 'crosshair');
cursorAt : Object : false
當開始移動時，滑鼠定位在的某個位置上（最多兩個方向）。可選值：{ top, left, right, bottom }.
初始：$('.selector').sortable({ cursorAt: 'top' });
獲取：var cursorAt = $('.selector').sortable('option', 'cursorAt');
設置：$('.selector').sortable('option', 'cursorAt', 'top');
delay : Integer : 0
以毫秒為單位，設置延遲多久才激活排序動作。此參數可防止誤點擊。
初始：$('.selector').sortable({ delay: 500 });
獲取：var delay = $('.selector').sortable('option', 'delay');
設置：$('.selector').sortable('option', 'delay', 500);
distance : Integer : 1
決定至少要在元素上面拖動多少像素後，才正式觸發排序動作。
初始：$('.selector').sortable({ distance: 30 });
獲取：var distance = $('.selector').sortable('option', 'distance');
設置：$('.selector').sortable('option', 'distance', 30);
dropOnEmpty : Boolean : true
是否允許拖拽到一個空的sortable對象中。
初始：$('.selector').sortable({ dropOnEmpty: false });
獲取：var dropOnEmpty = $('.selector').sortable('option', 'dropOnEmpty');
設置：$('.selector').sortable('option', 'dropOnEmpty', false);
forceHelperSize : Boolean : false
If true, forces the helper to have a size.
初始：$('.selector').sortable({ forceHelperSize: true });
獲取：var forceHelperSize = $('.selector').sortable('option', 'forceHelperSize');
設置：$('.selector').sortable('option', 'forceHelperSize', true);
forcePlaceholderSize : Boolean : false
If true, forces the placeholder to have a size.
初始：$('.selector').sortable({ forcePlaceholderSize: true });
獲取：var forcePlaceholderSize = $('.selector').sortable('option', 'forcePlaceholderSize');
設置：$('.selector').sortable('option', 'forcePlaceholderSize', true);
grid : Array : false
將排序對象的item元素視為一個格子處理，每次移動都按一個格子大小移動，數組值：[x,y]
初始：$('.selector').sortable({ grid: [50, 20] });
獲取：var grid = $('.selector').sortable('option', 'grid');
設置：$('.selector').sortable('option', 'grid', [50, 20]);
handle : Selector, Element : false
限制排序的動作只能在item元素中的某個元素開始。
初始：$('.selector').sortable({ handle: 'h2' });
獲取：var handle = $('.selector').sortable('option', 'handle');
設置：$('.selector').sortable('option', 'handle', 'h2');
helper : String, Function : 'original'
設置是否在拖拽元素時，顯示一個輔助的元素。可選值：'original', 'clone'
初始：$('.selector').sortable({ helper: 'clone' });
獲取：var helper = $('.selector').sortable('option', 'helper');
設置：$('.selector').sortable('option', 'helper', 'clone');
items : Selector : '> *'
指定在排序對象中，哪些元素是可以進行拖拽排序的。
初始：$('.selector').sortable({ items: 'li' });
獲取：var items = $('.selector').sortable('option', 'items');
設置：$('.selector').sortable('option', 'items', 'li');
opacity : Float : false
定義當排序時，輔助元素(helper)顯示的透明度。
初始：$('.selector').sortable({ opacity: 0.6 });
獲取：var opacity = $('.selector').sortable('option', 'opacity');
設置：$('.selector').sortable('option', 'opacity', 0.6);
placeholderType: StringDefault: false
設置當排序動作發生時，空白佔位符的CSS樣式。
初始：$('.selector').sortable({ placeholder: 'ui-state-highlight' });
獲取：var placeholder = $('.selector').sortable('option', 'placeholder');
設置：$('.selector').sortable('option', 'placeholder', 'ui-state-highlight');
revert : Boolean : false
如果設置成true，則被拖拽的元素在返回新位置時，會有一個動畫效果。
初始：$('.selector').sortable({ revert: true });
獲取：var revert = $('.selector').sortable('option', 'revert');
設置：$('.selector').sortable('option', 'revert', true);
scroll : Boolean : true
如果設置成true，則元素被拖動到頁面邊緣時，會自動滾動。
初始：$('.selector').sortable({ scroll: false });
獲取：var scroll = $('.selector').sortable('option', 'scroll');
設置：$('.selector').sortable('option', 'scroll', false);
scrollSensitivity : Integer : 20
設置當元素移動至邊緣多少像素時，便開始滾動頁面。
初始：$('.selector').sortable({ scrollSensitivity: 40 });
獲取：var scrollSensitivity = $('.selector').sortable('option', 'scrollSensitivity');
設置：$('.selector').sortable('option', 'scrollSensitivity', 40);
scrollSpeed : Integer : 20
設置頁面滾動的速度。
初始：$('.selector').sortable({ scrollSpeed: 40 });
獲取：var scrollSpeed = $('.selector').sortable('option', 'scrollSpeed');
設置：$('.selector').sortable('option', 'scrollSpeed', 40);
tolerance : String : 'intersect'
設置當拖動元素越過其它元素多少時便對元素進行重新排序。可選值：'intersect', 'pointer'
intersect：至少重疊50%
pointer：滑鼠指針重疊元素
初始：$('.selector').sortable({ tolerance: 'pointer' });
獲取：var tolerance = $('.selector').sortable('option', 'tolerance');
設置：$('.selector').sortable('option', 'tolerance', 'pointer');
zIndex : Integer : 1000
設置在排序動作發生時，元素的z-index值。
初始：$('.selector').sortable({ zIndex: 5 });
獲取：var zIndex = $('.selector').sortable('option', 'zIndex');
設置：$('.selector').sortable('option', 'zIndex', 5);
·事件
start
當排序動作開始時觸發此事件。
定義：$('.selector').sortable({ start: function(event, ui) { ... } });
綁定：$('.selector').bind('sortstart', function(event, ui) { ... });
sort
當元素發生排序時觸發此事件。
定義：$('.selector').sortable({ sort: function(event, ui) { ... } });
綁定：$('.selector').bind('sort', function(event, ui) { ... });
change
當元素發生排序且坐標已發生改變時觸發此事件。
定義：$('.selector').sortable({ change: function(event, ui) { ... } });
綁定：$('.selector').bind('sortchange', function(event, ui) { ... });
beforeStop
當排序動作結束之前觸發此事件。此時佔位符元素和輔助元素仍有效。
定義：$('.selector').sortable({ beforeStop: function(event, ui) { ... } });
綁定：$('.selector').bind('sortbeforeStop', function(event, ui) { ... });
stop
當排序動作結束時觸發此事件。
定義：$('.selector').sortable({ stop: function(event, ui) { ... } });
綁定：$('.selector').bind('sortstop', function(event, ui) { ... });
update
當排序動作結束時且元素坐標已經發生改變時觸發此事件。
定義：$('.selector').sortable({ update: function(event, ui) { ... } });
綁定：$('.selector').bind('sortupdate', function(event, ui) { ... });
receive
當一個已連接的sortable對象接收到另一個sortable對象的元素後觸發此事件。
定義：$('.selector').sortable({ receive: function(event, ui) { ... } });
綁定：$('.selector').bind('sortreceive', function(event, ui) { ... });
over
當一個元素拖拽移入另一個sortable對象後觸發此事件。
定義：$('.selector').sortable({ over: function(event, ui) { ... } });
綁定：$('.selector').bind('sortover', function(event, ui) { ... });
out
當一個元素拖拽移出sortable對象移出並進入另一個sortable對象後觸發此事件。
定義：$('.selector').sortable({ out: function(event, ui) { ... } });
綁定：$('.selector').bind('sortout', function(event, ui) { ... });
activate
當一個有使用連接的sortable對象開始排序動作時，所有允許的sortable觸發此事件。
定義：$('.selector').sortable({ activate: function(event, ui) { ... } });
綁定：$('.selector').bind('sortactivate', function(event, ui) { ... });
deactivate
當一個有使用連接的sortable對象結束排序動作時，所有允許的sortable觸發此事件。
定義：$('.selector').sortable({ deactivate: function(event, ui) { ... } });
綁定：$('.selector').bind('sortdeactivate', function(event, ui) { ... });
·方法
destory
從元素中移除拖拽功能。
用法：.sortable( 'destroy' )
disable
禁用元素的拖拽功能。
用法：.sortable( 'disable' )
enable
啟用元素的拖拽功能。
用法：.sortable( 'enable' )
option
獲取或設置元素的參數。
用法：.sortable( 'option' , optionName , [value] )
serialize
獲取或設置序列化後的每個item元素的id屬性。
用法：.sortable( 'serialize' , [options] )
toArray
獲取序列化後的每個item元素的id屬性的數組。
用法：.sortable( 'toArray' ）
refresh
手動重新刷新當前sortable對象的item元素的排序。
用法：.sortable( 'refresh' )
refreshPositions
手動重新刷新當前sortable對象的item元素的坐標，此方法可能會降低性能。
用法：.sortable( 'refreshPositions' )
cancel
取消當前sortable對象中item元素的排序改變。
用法：.sortable( 'cancel' )
排序後保存有兩種方法，一是cookie，二是資料庫配置文件等。
下面是資料庫的部分代碼 原作：
復制代碼代碼如下:
$(function() {
var show = $(".loader");
var orderlist = $(".orderlist");
var listleft = $("div[id = 'column_left']");
var listcenter = $("div[id = 'column_center']");
var listright = $("div[id = 'column_right']");
$( ".column" ).sortable({
opacity: 0.5,//拖動的透明度
revert: true, //緩沖效果
cursor: 'move', //拖動的時候滑鼠樣式
connectWith: ".column",
//開始用update 結果執行兩次，浪費資源，古改成stop
//但是stop在元素沒有改變位置的時候也會執行，
//用update其他js會有問題，^_^
stop: function(){
var new_order_left = []; //左欄布局
var new_order_center = [];//中欄布局
var new_order_right = [];//右欄布局
listleft.children(".portlet").each(function() {
new_order_left.push(this.title);
});
listcenter.children(".portlet").each(function() {
new_order_center.push(this.title);
});
listright.children(".portlet").each(function() {
new_order_right.push(this.title);
});
var newleftid = new_order_left.join(',');
var newcenterid = new_order_center.join(',');
var newrightid = new_order_right.join(',');
$.ajax({
type: "post",
url: jsonUrl, //服務端處理程序
data: { leftid: newleftid, centerid: newcenterid, rightid:newrightid}, //id:新的排列對應的ID,order：原排列順序
// beforeSend: function() {
// show.html(" 正在更新");
// },
success: function(msg) {
//alert(msg);
show.html("");
}
});
}
});
『柒』 js怎麼實現一個拖拽事件
Javascript的特點是dom的處理與網頁效果，大多數情況我們只用到了這個語言的最簡單的功能，比如製作圖片輪播/網頁的tab等等，這篇文章將向你展示如何在自己的網頁上製作拖拽．
有很多理由讓你的網站加入拖拽功能，最簡單的一個是數據重組．例如：你有一個序列的內容讓用戶排序，用戶需要給每個條目進行輸入或者用select 選擇，替代前面這個方法的就是拖拽．或許你的網站也需要一個用戶可以拖動的導航窗口！那麼這些效果都是很簡單：因為你可以很容易的實現！
網頁上實現拖拽其實也不是很復雜．第一你需要知道滑鼠坐標，第二你需要知道用戶滑鼠點擊一個網頁元素並實現拖拽，最後我們要實現移動這個元素．
獲取滑鼠移動信息
第一我們需要獲取滑鼠的坐標．我們加一個用戶函數到document.onmousemove就可以了:
Java代碼 收藏代碼
document.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
你首先要聲明一個evnet對象．不論何時你移動滑鼠／點擊／按鍵等等，會對應一個event的事件．在Internet Explorer里event是全局變數，會被存儲在window.event里． 在firefox中，或者其他瀏覽器，event事件會被相應的自定義函數獲取．當我們將mouseMove函數賦值於document.onmousemove，mouseMove會獲取滑鼠移動事件．
(ev = ev || window.event) 這樣讓ev在所有瀏覽器下獲取了event事件，在Firefox下"||window.event"將不起作用，因為ev已經有了賦值．在MSIE下ev是空的，所以ev將設置為window.event.
因為我們在這篇文章中需要多次獲取滑鼠坐標，所以我們設計了mouseCoords這個函數，它只包含了一個參數，就是the event.
我們需要運行在MSIE與Firefox為首的其他瀏覽器下．Firefox以event.pageX和event.pageY來代表滑鼠相應於文檔左上角的位置．如果你有一個500*500的窗口，而且你的滑鼠在正中間，那麼paegX和pageY將是250，當你將頁面往下滾動500px，那麼 pageY將是750.此時pageX不變，還是250.
MSIE和這個相反，MSIE將event.clientX與event.clientY來代表滑鼠與ie窗口的位置，並不是文檔．當我們有一個 500*500的窗口，滑鼠在正中間，那麼clientX與clientY也是250，如果你垂直滾動窗口到任何位置，clientY仍然是250，因為相對ie窗口並沒有變化．想得到正確的結果，我們必須加入scrollLeft與scrollTop這兩個相對於文檔滑鼠位置的屬性．最後，由於MSIE 並沒有0,0的文檔起始位置，因為通常會設置2px的邊框在周圍，邊框的寬度包含在document.body.clientLeft與 clientTop這兩個屬性中，我們再加入這些到滑鼠的位置中．
很幸運，這樣mouseCoords函數就完成了，我們不再為坐標的事操心了．
捕捉滑鼠點擊
下次我們將知道滑鼠何時點擊與何時放開．如果我們跳過這一步，我們在做拖拽時將永遠不知道滑鼠移動上面時的動作，這將是惱人的與違反直覺的．
這里有兩個函數幫助我們:onmousedown與onmouseup.我們預先設置函數來接收document.onmousemove，這樣看起來很象我們會獲取document.onmousedown與document.onmouseup．但是當我們獲取 document.onmousedown時，我們同時獲取了任何對象的點擊屬性如:text,images,tables等等.我們只想獲取那些需要拖拽的屬性，所以我們設置函數來獲取我們需要移動的對象．
移動一個元素
我們知道了怎麼捕捉滑鼠移動與點擊．剩下的就是移動元素了．首先，要確定一個明確的頁面位置，css樣式表要用'absolute'.設置元素絕對位置意味著我們可以用樣式表的.top和.left來定位，可以用相對位置來定位了．我們將滑鼠的移動全部相對頁面top-left，基於這點，我們可以進行下一步了．
當我們定義item.style.position='absolute'，所有的操作都是改變left坐標與top坐標，然後它移動了．
Java代碼 收藏代碼
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
var dragObject = null;
var mouseOffset = null;
function getMouseOffset(target, ev){
ev = ev || window.event;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
function getPosition(e){
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x:left, y:top};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
if(dragObject){
dragObject.style.position = 'absolute';
dragObject.style.top = mousePos.y - mouseOffset.y;
dragObject.style.left = mousePos.x - mouseOffset.x;
return false;
}
}
function mouseUp(){
dragObject = null;
}
function makeDraggable(item){
if(!item) return;
item.onmousedown = function(ev){
dragObject = this;
mouseOffset = getMouseOffset(this, ev);
return false;
}
}
你會注意到這個代碼幾乎是前面的全集，將前面的合在一起就實現了拖拽效果了．
當我們點擊一個item時，我們就獲取了很多變數，如滑鼠位置，滑鼠位置自然就包含了那個item的坐標信息了．如果我們點擊了一個20*20px圖像的正中間，那麼滑鼠的相對坐標為{x:10,y:10}．當我們點擊這個圖像的左上角那麼滑鼠的相對坐標為 {x:0,y:0}.當我們點擊時，我們用這個方法取得一些滑鼠與圖片校對的信息．如果我們不能載入頁面item，那麼信息將是document信息，會忽略了點擊的item信息．
mouseOffset函數使用了另一個函數getPosition.getPosition的作用是返回 item相對頁面左上角的坐標，如果我們嘗試獲取item.offsetLeft或者item.style.left，那麼我們將取得item相對與父級的位置，不是整個document．所有的腳本我們都是相對整個document，這樣會更好一些．
為了完成getPosition任務，必須循環取得item的父級，我們將載入內容到item的左／上的位置．我們需要管理想要的top與left列表．
自從定義了mousemove這個函數，mouseMove就會一直運行．第一我們確定item的 style.position為absolute，第二我們移動item到前面定義好的位置．當mouse點擊被釋放，dragObject被設置為 null，mouseMove將不在做任何事．
Dropping an Item
前面的例子目的很簡單，就是拖拽item到我們希望到的地方．我們經常還有其他目的如刪除item，比如我們可以將item拖到垃圾桶里，或者其他頁面定義的位置．
很不幸，我們有一個很大的難題，當我們拖拽，item會在滑鼠之下，比如mouseove,mousedown,mouseup或者其他mouse action．如果我們拖拽一個item到垃圾桶上，滑鼠信息還在item上，不在垃圾桶上．
怎麼解決這個問題呢？有幾個方法可以來解決．第一，這是以前比較推薦的，我們在移動滑鼠時item會跟隨滑鼠，並佔用了mouseover/mousemove等滑鼠事件，我們不這樣做，只是讓item跟隨著滑鼠，並不佔用mouseover等滑鼠事件，這樣會解決問題，但是這樣並不好看，我們還是希望item能直接跟在mouse下．
另一個選擇是不做item的拖拽．你可以改變滑鼠指針來顯示需要拖拽的item，然後放在滑鼠釋放的位置．這個解決方案，也是因為美學原因不予接受．
最後的解決方案是，我們並不去除拖拽效果．這種方法比前兩種繁雜許多，我們需要定義我們需要釋放目標的列表，當滑鼠釋放時，手工去檢查釋放的位置是否是在目標列表位置上，如果在，說明是釋放在目標位置上了．
Java代碼 收藏代碼
/*
All code from the previous example is needed with the exception
of the mouseUp function which is replaced below
*/
var dropTargets = [];
function addDropTarget(dropTarget){
dropTargets.push(dropTarget);
}
function mouseUp(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
for(var i=0; i<dropTargets.length; i++){
var curTarget = dropTargets[i];
var targPos = getPosition(curTarget);
var targWidth = parseInt(curTarget.offsetWidth);
var targHeight = parseInt(curTarget.offsetHeight);
if(
(mousePos.x > targPos.x) &&
(mousePos.x < (targPos.x + targWidth)) &&
(mousePos.y > targPos.y) &&
(mousePos.y < (targPos.y + targHeight))){
// dragObject was dropped onto curTarget!
}
}
dragObject = null;
}
滑鼠釋放時會去取是否有drop屬性，如果存在，同時滑鼠指針還在drop的范圍內，執行drop操作．我們檢查滑鼠指針位置是否在目標范圍是用(mousePos.x>targetPos.x)，而且還要符合條件(mousePos.x<(targPos.x + targWidth))．如果所有的條件符合，說明指針確實在范圍內，可以執行drop指令了．
Pulling It All Together
最後我們擁有了所有的drag/drop的腳本片斷！下一個事情是我們將創建一個DOM處理．
下面的代碼將創建container(容器),而且使任何一個需要drag/drop的item變成一個容器的item.代碼在這個文章第二個demo的後面，它可以用戶記錄一個list(列表)，定為一個導航窗口在左邊或者右邊，或者更多的函數你可以想到的．
下一步我們將通過"假代碼"讓reader看到真代碼，下面為推薦:
1、當document第一次載入時，創建dragHelper DIV.dragHelper將給移動的item加陰影．真實的item沒有被dragged，只是用了insertBefor和appendChild來移動了，我們隱藏了dragHelper
2、有了mouseDown與mouseUp函數．所有的操作會對應到當到iMouseDown的狀態中，只有當mouse左鍵為按下時iMouseDown才為真，否則為假．
3、我們創建了全局變數DragDrops與全局函數CreateDragContainer.DragDrops包含了一系列相對彼此的容器．任何參數(containers)將通過CreatedcragContainer進行重組與序列化，這樣可以自由的移動．CreateDragContainer函數也將item進行綁定與設置屬性．
4、現在我們的代碼知道每個item的加入，當我們移動處mouseMove，mouseMove函數首先會設置變數target，滑鼠移動在上面的item，如果這個item在容器中(checked with getAttribute):
* 運行一小段代碼來改變目標的樣式．創造rollover效果
* 檢查滑鼠是否沒有放開，如果沒有
o 設置curTarget代表當前item
o 記錄item的當前位置，如果需要的話，我們可以將它返回
o 克隆當前的item到dragHelper中，我們可以移動帶陰影效果的item.
o item拷貝到dragHelper後，原有的item還在滑鼠指針下，我們必須刪除掉dragObj，這樣腳本起作用，dragObj被包含在一個容器中．
o 抓取容器中所有的item當前坐標，高度/寬度，這樣只需要記錄一次，當item被drag時，每隨mouse移動，每移鍾就會記錄成千上萬次．
* 如果沒有，不需要做任何事，因為這不是一個需要移動的item
5、檢查curTarget，它應該包含一個被移動的item,如果存在，進行下面操作：
* 開始移動帶有陰影的item，這個item就是前文所創建的
* 檢查每個當前容器中的container，是否滑鼠已經移動到這些范圍內了
o 我們檢查看一下正在拖動的item是屬於哪個container
o 放置item在一個container的某一個item之前，或者整個container之後
o 確認item是可見的
* 如果滑鼠不在container中，確認item是不可見了．
『捌』 JS控制多個div拖拽和拖動、且能保存到資料庫中 誰有demo 發個給兄弟
這個需要Ajax的操作，引入jquery庫吧，操作會方面很多。