Ho un div che contiene un intervallo 16x16px. Voglio che l'evento di trascinamento inizi quando l'utente fa clic e trascina questa icona, ma dovrebbe trascinare l'intero div. Sto cercando di seguire questo tutorial qui: http://www.html5rocks.com/en/tutorials/dnd/basics/Drag drop con handle
Non riesco a capire come farlo con una maniglia. Si prega di pubblicizzare.
Ecco un esempio di lavoro: https://jsfiddle.net/pwt1cbjc/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drag Handle</title>
<style>
#draggable {
width: 100px;
height: 100px;
border: 1px solid black;
}
#handle {
width: 0;
height: 0;
border-right: 20px solid transparent;
border-top: 20px solid black;
cursor: move;
}
</style>
</head>
<body>
<h1>Drag Handle</h1>
<div id="draggable" draggable="true">
<div id="handle">
</div>
</div>
<script>
var draggable = document.getElementById('draggable');
var handle = document.getElementById('handle');
var target = false;
draggable.onmousedown = function(e) {
target = e.target;
};
draggable.ondragstart = function(e) {
if (handle.contains(target)) {
e.dataTransfer.setData('text/plain', 'handle');
} else {
e.preventDefault();
}
};
</script>
</body>
</html>
Wow thank you questo è cool, il div non è disponibile spostato però in calo, è possibile aggiungere che? Inoltre, è possibile aggiungere animazioni di diapositive mentre l'utente si sposta? – Noitidart
Non ti aspettavi che avessi ancora bisogno di una risposta per questa vecchia domanda, ahah! Ci siamo imbattuti per caso e ho deciso di rispondere comunque. A proposito di drop, dai un'occhiata alla risposta qui per alcuni esempi di codice: http://stackoverflow.com/questions/6230834/html5-drag-and-drop-anywhere-on-the-screen – SaphuA
Ho fatto un altro modo, è stato molto più intenso (su Mousemown ho aggiunto l'ascoltatore di Mousemove, e su Mousemove avrei impostato l'elmento 'left',' top' e seguiva il cursore in modo animato), la tua strada è molto bella e mi sento più performante, e mi piacerebbe adattarlo. – Noitidart