Skip to content

Instantly share code, notes, and snippets.

@dirkk0

dirkk0/index.html

Created January 18, 2013 16:13
Show Gist options
  • Save dirkk0/4565681 to your computer and use it in GitHub Desktop.
Save dirkk0/4565681 to your computer and use it in GitHub Desktop.
Download ZIP
drag a box on multiple browsers in realtime with websockets. Most of the code is from this thread: http://stackoverflow.com/questions/9865167/socket-io-and-complex-json-with-node-js-jquery (I changed the mousemove to drag, though)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(document).ready(function () {
var socket = io.connect();
socket.on('update_position', function (data) {
var x = data.x;
var y = data.y;
// jquery code to move div here
$("#left").val(x);
$("#top").val(y);
$("#mydiv").css({
left: x + "px",
top: y + "px"
});
});
$("#mydiv").draggable({
drag: function (event, ui) {
var coord = $(this).position();
$("#left").val(coord.left);
$("#top").val(coord.top);
socket.emit('receive_position', {
x: coord.left,
y: coord.top
});
}
});
});
</script>
<style>
.dstyle
{
position: absolute;
width: 50px; height: 50px;
background: #ffb; padding: 5px;
border: 2px solid #999;
}
</style>
</head>
<body>
X: <input type="text" id="left"/>
Y: <input type="text" id="top"/>
<div id="mydiv" class="dstyle">drag me</div>
</body>
Raw
server.js
var app = require('http').createServer(handler)
, io = require('socket.io').listen(app)
, fs = require('fs')
app.listen(8080);
function handler (req, res) {
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
var lastPosition = { x: 0, y: 0 }; // whatever default data
io.sockets.on('connection', function (socket) {
socket.emit('update_position', lastPosition);
socket.on('receive_position', function (data) {
lastPosition = data;
socket.broadcast.emit('update_position', data); // send `data` to all other clients
});
});
@neeraj87
Copy link

neeraj87 commented May 4, 2018

Hey, I am trying to do the same but have some difficulties. The element being dragged is generated dynamically. So far when I generate the element, it is emitted to all the clients properly. Its the dragging and dropping where I am having problems.

Here is my code:

index.html

<script src="/js/indexPublic.js"></script>

<button id="dynamicAdd" type="button">Add</button>
<div id="parentDiv" style="border:1px solid black;height: 200px;"></div>
<br/>
<div id="secondParent" style="border:2px dotted red; height: 200px"></div>

indexPublic.js

$(document).ready(function(){
    var socket = io();

    $('#secondParent').droppable({
        drop: function(event, ui){
            var dropped = ui.draggable;
            var droppedOn = $(this);
            socket.emit('dropped', {dropped : ui.draggable, droppedOn : droppedOn});
        }
    });

    $('#dynamicAdd').on('click', function(){
        socket.emit('messages', '<div class="child" style="border:1px dotted blue">this div was added by another user</div>');
        $('#parentDiv').append('<div class="child" style="border:1px dotted blue">this div was added by another user</div>');
        $('#parentDiv').children('div.child').draggable();
    });

    socket.on('broadcastmessages', function(data){
        $('#parentDiv').append(data);
        $('#parentDiv').children('div.child').draggable();
    });

    socket.on('broadcastdropped', function(data){
        console.log('------- broadcastdropped console data: ' + data);
        //how do I show the drop here?
    });
});

app.js

io.on('connection', function(socket){
    socket.on('messages', function(data){
      socket.broadcast.emit('broadcastmessages', data);
    });

    socket.on('dropped', function(data){
      console.log('--------- html is dropped: ' + data);
      socket.broadcast.emit('broadcastdropped', data);
    });
});

Any help will be appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment