Gostaria de permitir usuários moverem algumas coisas do meu site. Do tipo, o usuário poderia arrastar o menu para outro lugar para posicionar melhor a leitura.
1 Resposta
Existe várias maneiras de se fazer isto, como:
- Javascript + CSS
- Javascript puro (sem CSS, cria uma "fantasma" do element)
- E com frameworks como jQuery UI ou interact.js
Com javascript + CSS
Veja que usei z-index
pra que o objeto fique a frente dos demais quando tiver multiplos elementos
window.onload = function () {
Dragable(document.getElementById("foo"));
Dragable(document.getElementById("baz"));
Dragable(document.getElementById("bar"));
};
//Adiciona eventos pra navegadores modernos e antigos
function addEvent(el, type, callback)
{
if (el.addEventListener) {
el.addEventListener(type, callback);
} else if (el.attachEvent) {
el.attachEvent("on" + type, callback);
}
}
function Dragable(el)
{
var isMove = false, //Verifica se esta se movendo
x = 0, y = 0, //Pega as coordenadas do mouse
xel = 0, yel = 0; // ultima posição do elemento
addEvent(el, "mousedown", function (e) {
isMove = true;
el.className += " isMoving";
x = window.event ? window.event.clientX : e.pageX;
y = window.event ? window.event.clientY : e.pageY;
xel = x - el.offsetLeft;
yel = y - el.offsetTop;
});
addEvent(document, "mousemove", function (e) {
if (isMove) {
e.preventDefault();
x = window.event ? window.event.clientX : e.pageX;
y = window.event ? window.event.clientY : e.pageY;
el.style.left = (x - xel) + 'px';
el.style.top = (y - yel) + 'px';
}
});
addEvent(document, "mouseup", function () {
el.className = String(el.className).replace(/(^|\s)isMoving(\s|$)/g, " ");
isMove = false;
});
};
#foo, #baz, #bar {
position: absolute;
z-index: 1000;
width: 200px;
height: 200px;
background-color: #fc0;
}
.isMoving {
z-index: 1001 !important;
}
#baz {
top: 210px;
left: 210px;
background-color: #f00;
}
#bar {
top: 410px;
left: 410px;
background-color: #00f;
}
<div id="foo"></div>
<div id="bar"></div>
<div id="baz"></div>
Com eventos nativos (javascript puro) e o event.dataTransfer
:
No HTML temos os atributos ondragstart
, ondrop
e ondragover
que servem para este proposito, porém o navegador cria uma imagem fantasma do elemento conforme arrasta, o elemento continua no lugar e só muda de lugar depois do "drop", note que este não posiciona por X e Y, mas sim dentro de outros elementos HTML.
function allowDrop(e) {
e = e||window.event;
e.preventDefault();
}
function drag(e) {
e = e||window.event;
e.dataTransfer.setData("text", e.target.id);
}
function drop(e) {
e = e||window.event;
e.preventDefault();
var data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
}
var area1 = document.getElementById("drop-area-1");
var area2 = document.getElementById("drop-area-2");
var draggable = document.getElementById("draggable-item");
draggable.ondragstart = drag;
area1.ondrop = drop;
area1.ondragover = allowDrop;
area2.ondrop = drop;
area2.ondragover = allowDrop;
#draggable-item
{
background-color: #fc0;
width: 100px;
height: 100px;
}
#drop-area-1, #drop-area-2
{
display: inline-block;
border: 1px #c0c0c0 solid;
width: 200px;
height: 200px;
margin: 5px;
}
<div id="draggable-item" draggable="true"></div>
<div id="drop-area-1"></div>
<div id="drop-area-2"></div>
Usando jQuery UI
O jQuery possui uma biblioteca adicional que pode ser baixada neste link jQuery UI
$( "#draggable" ).draggable();
#draggable { width: 150px; height: 150px; padding: 0.5em; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
<p>Clique e arraste</p>
</div>
Usando interact.js
O interact.js é uma biblioteca javascript que suporta redimencionar, mover, mobiles, etc.
// target elements with the "draggable" class
interact('.draggable')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// call this function on every dragmove event
onmove: dragMoveListener,
// call this function on every dragend event
onend: function (event) {
var textEl = event.target.querySelector('p');
textEl && (textEl.textContent =
'moved a distance of '
+ (Math.sqrt(event.dx * event.dx +
event.dy * event.dy)|0) + 'px');
}
});
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing demo
window.dragMoveListener = dragMoveListener;
#drag-1, #drag-2 {
width: 25%;
height: 100%;
min-height: 6.5em;
margin: 10%;
background-color: #29e;
color: white;
border-radius: 0.75em;
padding: 4%;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
#drag-me::before {
content: "#" attr(id);
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.4/interact.min.js"></script>
<div id="drag-1" class="draggable">
<p> You can drag one element </p>
</div>
<div id="drag-2" class="draggable">
<p> with each pointer </p>
</div>
Como inserir JavaScript no HTML
Você deve fazer o seguinte:
<!DOCTYPE html>
<html>
<head>
<title>titulo</title>
Coloque o arquivos .js e .css aqui
</head>
<body>
Coloque o conteudo HTML aqui
</body>
</html>
Um exemplo deve ser algo como o jquery e jqueryui (no caso estou usando o CDN):
<!DOCTYPE html>
<html>
<head>
<title>Titulo</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Clique e arraste</p>
</div>
</body>
</html>