簡單玩了一下拖拉窗視

2017-07-16 96 words One minute

Contents

這一篇只是程式記錄，沒有完成非常大的東西…

最近想手動做個拖拉功能
不太想用jQuery UI套Dialog上去
有參考來做換色與快速整理的便利貼牆吧！這個教學方法

不過想自己試試純JS做出來
後來移動出問題，解不出來
Google一下有看到有人寫一隻
多個DIV共用自由移動DIV的程式
有遇到幾個問題，在此記錄

http://jsbin.com/qexuvawolo/edit?js,output

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


var top1=0,left1=0;
var moveFunction = function(event){
    console.log('x=',event.clientX);
    console.log('y=',event.clientY);
    console.log('ox=',event.offsetX);
    console.log('oy=',event.offsetY);
    document.getElementById('dialog').style.top =  event.clientY - top1+ "px";
     document.getElementById('dialog').style.left = event.clientX - left1 + "px";
 };

var mousedownFunction = function(event){
  top1 = event.offsetX;  //event.clientY - obj.offsetTop
  left1 = event.offsetY; //event.clientX - obj.offsetLeft
  document.getElementById('dialog').addEventListener('mousemove',moveFunction);
}

document.getElementById('dialog').addEventListener('mousedown',mousedownFunction);


document.getElementById('dialog').addEventListener('mouseup',function(){
  document.getElementById('dialog').removeEventListener('mousemove',moveFunction);
});