Chrome里默认情况下,在页面中拖动链接或者文本鼠标会是个禁止点击的样式,并且会丢失mouseup事件,所以我们不得不使用HTML5的拖放事件 – drag and drop.
然后在拖动开始事件dragstart中记录鼠标位置,放置事件drop中判断鼠标是往哪个方向移动过了,下面这段代码可以识别出左上,左下,右上,右下. 还可以在这个基础上判断一下鼠标移动距离来添加更多的动作.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | /*Drag and Drop*/ function dragEvent(data){ //右下角 if (data.x==1 && data.y == 1) { var http = /^(http|www)/ if (http.test(data)) { //拖放超链接右下方向滑动 return; }else{ //拖放文本右下方向滑动 return; } } //左下角 else if (data.x== -1 && data.y == 1) { console.log("左下角"); } //右上角 else if (data.x==1 && data.y == -1) { console.log("右上角"); } //左上角 else if (data.x== -1 && data.y == -1) { console.log("左上角"); } } function dragCancel (e) { if (e.preventDefault) { e.preventDefault (); } return false; } function dragStart(e) { start_x = e.screenX; start_y = e.screenY; } //拖动事件 document.addEventListener('dragstart', dragStart, false); //禁止拖动到目标上 document.addEventListener('dragover', dragCancel, false); //放置事件 document.addEventListener('drop', function (e) { if (e.preventDefault) { e.preventDefault (); } var x_dir = 1; if (e.screenX < start_x) { x_dir = -1; } var y_dir = 1; if (e.screenY < start_y) { y_dir = -1; } var data = e.dataTransfer.getData('URL'); if (!data) { data = e.dataTransfer.getData('Text'); } if (data) { dragEvent({ values: data, x: x_dir, y: y_dir }); return false; } }); |
很不错