可移动/可拖动< div> [英] Moveable/draggable <div>
本文介绍了可移动/可拖动< div>的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我更新和修改的脚本,它完全有效,除了我想要普及它...观察****我怎样才能做到这一点我不必做 function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e);
每次我需要将可拖动函数用于其他元素?
This is my updated and modified script, it works completely, except I would like to universalize it... observe the **** how can I make it so that I don't have to do function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e);
everytime I need to use the dragable function for a different element?
window.onload = addListeners;
var BOX = function(){
return{
Draggable: function(){}
};
}();
function addListeners(){
document.getElementById('div').addEventListener('contextmenu', menumove, false);
**document.getElementById('div').addEventListener('mousedown', function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e);}, false);**
}
function elementDraggable(e){
var e = e || window.event;
var div = BOX.Draggable.elemen;
BOX.Draggable.innerX = e.clientX + window.pageXOffset - div.offsetLeft;
BOX.Draggable.innerY = e.clientY + window.pageYOffset - div.offsetTop;
window.addEventListener('mousemove', elementMove, false);
window.addEventListener('mouseup', function(){
window.removeEventListener('mousemove', elementMove, false);
}, true);
function elementMove(e){
div.style.position = 'absolute';
div.style.left = e.clientX + window.pageXOffset - BOX.Draggable.innerX + 'px';
div.style.top = e.clientY + window.pageYOffset - BOX.Draggable.innerY + 'px';
}
}
推荐答案
是jQuery是你的选择吗?由于代码已存在,因此您所做的事情非常简单。
Is jQuery an option for you? It makes what you are doing really simple since the code already exists.
http: //jqueryui.com/demos/draggable/
Demo
JavaScript代码
JavaScript Code
window.onload = addListeners;
function addListeners(){
document.getElementById('dxy').addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp()
{
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown(e){
window.addEventListener('mousemove', divMove, true);
}
function divMove(e){
var div = document.getElementById('dxy');
div.style.position = 'absolute';
div.style.top = e.clientY + 'px';
div.style.left = e.clientX + 'px';
}
这篇关于可移动/可拖动< div>的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文