A group of friends and I are currently collaborating on an experimental project for a presentation.
Our goal is to have multiple elements (such as images, text, gifs) displayed on a page that can be dragged around in real-time using a draggable script while maintaining their positions. The plan is to allow multiple users to access the page simultaneously and move objects around, creating a collaborative collage across various screens and devices.
I recently stumbled upon www.togetherjs.com/examples/drawing/
My aim is to adapt the concept of shared drawing to draggable imagery where the images maintain their position once moved by users.
What steps should I take to ensure that the images remain in place, can be easily dragged in real-time, and retain their new positions? I have already made some progress here http://jsfiddle.net/bj2ftf59/
var dragobject = {
z: 0,
x: 0,
y: 0,
offsetx: null,
offsety: null,
targetobj: null,
dragapproved: 0,
initialize: function() {
document.onmousedown = this.drag
document.onmouseup = function() {
this.dragapproved = 0
}
},
drag: function(e) {
var evtobj = window.event ? window.event : e
this.targetobj = window.event ? event.srcElement : e.target
if (this.targetobj.className == "drag") {
this.dragapproved = 1
if (isNaN(parseInt(this.targetobj.style.left))) {
this.targetobj.style.left = 0
}
if (isNaN(parseInt(this.targetobj.style.top))) {
this.targetobj.style.top = 0
}
this.offsetx = parseInt(this.targetobj.style.left)
this.offsety = parseInt(this.targetobj.style.top)
this.x = evtobj.clientX
this.y = evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove = dragobject.moveit
}
},
moveit: function(e) {
var evtobj = window.event ? window.event : e
if (this.dragapproved == 1) {
this.targetobj.style.left = this.offsetx + evtobj.clientX - this.x + "px"
this.targetobj.style.top = this.offsety + evtobj.clientY - this.y + "px"
return false
}
}
}
dragobject.initialize().drag {
position: relative;
cursor: hand;
z-index: 100;
width: 250px;
}<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>
<br>
<img src="http://www.giraffeworlds.com/wp-content/uploads/Beautiful_Masai_Giraffe_Posing_600.jpg" class="drag" onmouseover="this.src='http://www.giraffeworlds.com/wp-content/uploads/Beautiful_Masai_Giraffe_Posing_600.jpg'" onmouseout="this.src='http://www.giraffeworlds.com/wp-content/uploads/Beautiful_Masai_Giraffe_Posing_600.jpg'"
alt="Giraffe Boy" title="Giraffe Boy" class="Glassware" max-width="20px" />
<script src="https://togetherjs.com/togetherjs-min.js"></script>