Im using Boris Cherny's excellent draggable package (https://www.npmjs.com/package/draggable), with the eventual aim of using it with socket.io to update the position of multiple divs for each conneced user. Im fairly new to Javascript and I cant figure out how to move the divs manually.
Currently I have something like this for the script:
// find our elements
var elements = document.getElementsByClassName('ball'),
labelsX = document.getElementsByClassName('coords-x'),
labelsY = document.getElementsByClassName('coords-y');
// loop over the 3 balls...
for (var n = elements.length; n--;) {
// ... augment our default options with individual `onDrag` handlers
var opts = {
onDrag: onDragFactory(n),
setCursor: true,
setPosition: true
};
// ... and initialize drag for each
window.d = new Draggable(elements[n], opts);
}
// bind `n` to its value at iteration time
function onDragFactory (n) {
//This is not working
elements[n].set(10,10);
return function (element, x, y) {
labelsX[n].innerHTML = x;
labelsY[n].innerHTML = y;
}
}
For reference my index.html is
<!doctype html>
<html>
<head>
<title>basic demo | draggable.js</title>
<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="../demos/__common/common.css" />
</head>
<body>
<ul id="nav">
<li><a class="cur" href="#">Basic</a></li>
<li><a href="../demos/bounded">Bounded</a></li>
<li><a href="../demos/boundedcustom">Bounded (custom)</a></li>
<li><a href="../demos/grid">Grid</a></li>
<li><a href="../demos/handle">Handle</a></li>
</ul>
<div id="container">
<div class="ball red">1</div>
<div class="ball green">2</div>
<div class="ball blue">3</div>
</div>
<div id="info">
<div class="column">
<h1>1</h1>
<span class="coords-x"></span>
<span class="coords-y"></span>
</div>
<div class="column">
<h1>2</h1>
<span class="coords-x"></span>
<span class="coords-y"></span>
</div>
<div class="column">
<h1>3</h1>
<span class="coords-x"></span>
<span class="coords-y"></span>
</div>
</div>
<script src="../src/draggable.js"></script>
<script src="../demos/__common/common.js"></script>
<!-- this is the script you're looking for... -->
<script src="basic.js"></script>
</body>
</html>
I would like to get the position of the div, emit to server, then have the server emit it all listeners, however I cant in the first step get or set the positions.
How do I get or set the positions of the divs? Any help/pointers would be much appreciated!
via masterofimps
No comments:
Post a Comment