事情是這樣的，右邊有各種控制項，可以拖動到右邊自由區，在自由區內可以隨意拖動。
vue 中基於html5 drag drap的拖放
案例一：
開始的我，so easy！ 通過繫結元素的mousedown 事件，監聽滑鼠的mousemove，和mouseup 事件，於是我輕鬆實現了同一區域內元素可以拖著跑，上**！
move (e)
document.onmouseup = e =>
}
以上**並不能滿足需要，要左右布局，左邊的拖到右邊，在右邊區域隨便拖動。
案例二：
好吧，首先我來布個局，左右布局，給元素繫結事件，上**!
dragstart (ev) ,
draging (e)
x -= this.offsetx
y -= this.offsety
// console.log('e left')
// console.log(x + '-' + y)/* 它的父級第乙個存在定位的元素，如果有margin減去margin值 */
e.target.style.left = x - 5 + 'px'
e.target.style.top = y - 60 + 'px'
} },
drop (ev) ,
dragend (event)
終於，也不知道哪來的靈感，這個困擾我兩秒的難題突然就被我成功攻克了。好了，我要開始吹牛了……
案例三：
我的思路是這樣的（不想看？直接看**好了，反正是給我自己看的）：左邊列表元素可拖動（draggable=『true』）,繫結dragstart(開始事件)，不要給它繫結draging(拖動事件)，這樣左邊列表元素有拖動屬性，但是位置不會改變。當右側拖動區域
頁面上迴圈陣列元素，生成元素即往陣列中push 元素即可。 每次拖動元素都會觸發drop 事件，並不是每次都要生成乙個新元素，要知道是從左邊列表拖到右側第一次drop 的時候生成新元素。 怎麼知道呢？這就是兩個dragstart的妙處
methods:
ev.datatransfer.setdata('text', json.stringify(info))
this.offsetx = ev.offsetx
this.offsety = ev.offsety
}, drop (e)
},imgstart (e)
e.datatransfer.setdata(『text』, json.stringify(info))
this.imgoffsetx = e.offsetx
this.imgoffsety = e.offsety
},draging (e, item) ,
imgend (event)
}注意：拖動元素設定position:absolute屬性
vue 中基於html5 drag drap的拖放
HTML 5入門知識 Drag
html 5拖放 拖放的步驟 1 物件元素的draggable屬性設定為true，還需要注意的是a元素和img元素必須指定href。2 編寫與拖放有關的事件處理 datatransfer物件的屬性和方法 設定拖放時的視覺效果 dropeffect屬性與effectallowed屬性結合起來可以設定拖...
html5拖 drag 放 drop 功能
設定元素可拖動 乙個img想放到div中，首先設定img可以被拖動 draggable true 拖動什麼 ondeagstart setdata 元素拖動的時候會發生什麼，drag ev 這方法規定了被拖動的資料，ev.datatransfer.setdata text ev.target.id ...
初學HTML5 拖放（Drag 和 Drop）
internet explorer 9 firefox,opera,chrome,和 safari 支援拖動。注意 safari 5.1.2不支援拖動.id drag1 src images logo.png draggable true ondragstart drag event width 3...