Salve a tutti,
sono una nabba in js ed è tutto il giorno che cerco di capire come modificare uno script.
Devo far si che 3 div posizionati in verticale si possano spostare separatamente.
Al momento ho il codice funzionante con un solo div con id collegato al js.
Per convertire l'azione a 3 div con class e non id, come si deve fare?
Spero si sia compreso il mio cruccio, non so davvero dove mettere le mani.
Nel caso sia un errore banale o una cosa incomprensibile, non mandatemi a rogo, sono solo una ragazza che non sa dire di no al proprio capo
Vi metto il codice qui sotto:
sono una nabba in js ed è tutto il giorno che cerco di capire come modificare uno script.
Devo far si che 3 div posizionati in verticale si possano spostare separatamente.
Al momento ho il codice funzionante con un solo div con id collegato al js.
Per convertire l'azione a 3 div con class e non id, come si deve fare?
Spero si sia compreso il mio cruccio, non so davvero dove mettere le mani.
Nel caso sia un errore banale o una cosa incomprensibile, non mandatemi a rogo, sono solo una ragazza che non sa dire di no al proprio capo
Vi metto il codice qui sotto:
Codice:
<body>
<div id="drag">Spostami!</div>
</body>
<script>
var Draggable = function (id) {
var el = document.getElementById(id),
isDragReady = false,
dragoffset = {
x: 0,
y: 0
};
this.init = function () {
this.initPosition();
this.events();
};
this.initPosition = function () {
el.style.position = "absolute";
el.style.top = "20px";
el.style.left = "48%";
};
this.events = function () {
var self = this;
_on(el, 'mousedown', function (e) {
isDragReady = true;
//corssbrowser mouse pointer values
e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
dragoffset.x = e.pageX - el.offsetLeft;
dragoffset.y = e.pageY - el.offsetTop;
});
_on(document, 'mouseup', function () {
isDragReady = false;
});
_on(document, 'mousemove', function (e) {
if (isDragReady) {
e.pageX = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
e.pageY = e.pageY || e.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
el.style.top = (e.pageY - dragoffset.y) + "px";
el.style.left = (e.pageX - dragoffset.x) + "px";
}
});
};
//cross browser event Helper function
var _on = function (el, event, fn) {
document.attachEvent ? el.attachEvent('on' + event, fn) : el.addEventListener(event, fn, !0);
};
this.init();
}
</script>
<script type="text/javascript">
new Draggable('drag');
</script>
