eventos - object mouse event javascript
Mover/arrastrar<div> (5)
¿Es jQuery una opción para ti? Hace que lo que estás haciendo sea realmente simple ya que el código ya existe.
http://jqueryui.com/demos/draggable/
Código JavaScript
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'';
}
Este es mi script actualizado y modificado, funciona completamente, excepto que me gustaría universalizarlo ... observe el **** cómo puedo hacerlo para que no tenga que hacer la function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e); function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e); ¿Cada vez que necesito usar la función de arrastre para un elemento diferente?
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'';
}
}
Bueno, tu código de movimiento se simplifica a:
div.style.position = "absolute";
div.style.top = e.clientY - (e.clientY - div.offsetTop) + "px";
div.style.left = e.clientX - (e.clientX - div.offsetLeft) + "px";
Matemáticas básicas aquí: e.clientX y e.clientY tienen absolutamente ningún efecto en la posición aquí, por lo que solo está tomando offsetLeft y reasignándolo al style.left , y lo mismo para la parte superior. Por lo tanto no hay movimiento alguno.
Lo que hay que hacer es guardar el clientX y el clientY cuando se mousedown el mousedown del mousedown , y hacer la resta en función de eso.
Ah, y también estás configurando mal el oyente del evento. divMove como está ahora, lo tiene ejecutando divMove una vez y el valor de retorno ( undefined aquí) es la función adjunta como el oyente. En su lugar, use la function(e) {divMove(dxy,e || window.event);} .
Este es un buen script no-jQuery para arrastrar un div: http://jsfiddle.net/g6m5t8co/1/
<!doctype html>
<html>
<head>
<style>
#container {
position:absolute;
background-color: blue;
}
#elem{
position: absolute;
background-color: green;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
</style>
<script>
var mydragg = function(){
return {
move : function(divid,xpos,ypos){
divid.style.left = xpos + ''px'';
divid.style.top = ypos + ''px'';
},
startMoving : function(divid,container,evt){
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
divTop = divid.style.top,
divLeft = divid.style.left,
eWi = parseInt(divid.style.width),
eHe = parseInt(divid.style.height),
cWi = parseInt(document.getElementById(container).style.width),
cHe = parseInt(document.getElementById(container).style.height);
document.getElementById(container).style.cursor=''move'';
divTop = divTop.replace(''px'','''');
divLeft = divLeft.replace(''px'','''');
var diffX = posX - divLeft,
diffY = posY - divTop;
document.onmousemove = function(evt){
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
aX = posX - diffX,
aY = posY - diffY;
if (aX < 0) aX = 0;
if (aY < 0) aY = 0;
if (aX + eWi > cWi) aX = cWi - eWi;
if (aY + eHe > cHe) aY = cHe -eHe;
mydragg.move(divid,aX,aY);
}
},
stopMoving : function(container){
var a = document.createElement(''script'');
document.getElementById(container).style.cursor=''default'';
document.onmousemove = function(){}
},
}
}();
</script>
</head>
<body>
<div id=''container'' style="width: 600px;height: 400px;top:50px;left:50px;">
<div id="elem" onmousedown=''mydragg.startMoving(this,"container",event);'' onmouseup=''mydragg.stopMoving("container");'' style="width: 200px;height: 100px;">
<div style=''width:100%;height:100%;padding:10px''>
<select id=test>
<option value=1>first
<option value=2>second
</select>
<INPUT TYPE=text value="123">
</div>
</div>
</div>
</body>
</html>
Un método adicional al código "niente00".
init : function(className){
var elements = document.getElementsByClassName(className);
for (var i = 0; i < elements.length; i++){
elements[i].onmousedown = function(){mydragg.startMoving(this,''container'',event);};
elements[i].onmouseup = function(){mydragg.stopMoving(''container'');};
}
}
Shaedo''s un poco Shaedo''s código Shaedo''s en una función y agregué una función que puedes arrastrar un elemento solo por partes de él o sus hijos, por ejemplo, la barra de título de un div. Tenga en cuenta que en esta demostración, solo puede arrastrar el área roja para mover el área azul.
function makeDragable(dragHandle, dragTarget) {
let dragObj = null; //object to be moved
let xOffset = 0; //used to prevent dragged object jumping to mouse location
let yOffset = 0;
document.querySelector(dragHandle).addEventListener("mousedown", startDrag, true);
document.querySelector(dragHandle).addEventListener("touchstart", startDrag, true);
/*sets offset parameters and starts listening for mouse-move*/
function startDrag(e) {
e.preventDefault();
e.stopPropagation();
dragObj = document.querySelector(dragTarget);
dragObj.style.position = "absolute";
let rect = dragObj.getBoundingClientRect();
if (e.type=="mousedown") {
xOffset = e.clientX - rect.left; //clientX and getBoundingClientRect() both use viewable area adjusted when scrolling aka ''viewport''
yOffset = e.clientY - rect.top;
window.addEventListener(''mousemove'', dragObject, true);
} else if(e.type=="touchstart") {
xOffset = e.targetTouches[0].clientX - rect.left;
yOffset = e.targetTouches[0].clientY - rect.top;
window.addEventListener(''touchmove'', dragObject, true);
}
}
/*Drag object*/
function dragObject(e) {
e.preventDefault();
e.stopPropagation();
if(dragObj == null) {
return; // if there is no object being dragged then do nothing
} else if(e.type=="mousemove") {
dragObj.style.left = e.clientX-xOffset +"px"; // adjust location of dragged object so doesn''t jump to mouse position
dragObj.style.top = e.clientY-yOffset +"px";
} else if(e.type=="touchmove") {
dragObj.style.left = e.targetTouches[0].clientX-xOffset +"px"; // adjust location of dragged object so doesn''t jump to mouse position
dragObj.style.top = e.targetTouches[0].clientY-yOffset +"px";
}
}
/*End dragging*/
document.onmouseup = function(e) {
if (dragObj) {
dragObj = null;
window.removeEventListener(''mousemove'', dragObject, true);
window.removeEventListener(''touchmove'', dragObject, true);
}
}
}
makeDragable(''#handle'', ''#moveable'')
#moveable {
width: 100px;
height: 100px;
background: blue;
}
#handle {
width: 50px;
height: 50px;
cursor: move;
background: red;
}
<div id="moveable">
<div id="handle">
</div>
</div>