I've been working on creating a draggable div with the ability to bind its location for further use. I'm aiming to have multiple draggable elements on the page. Currently, I've implemented a 'dragable' attribute directive that allows me to drag the element around using 'x' and 'y' attributes to set the initial location.
<body ng-app="myApp" ng-controller="myCtrl">
<div dragable x="50" y="50" style="...."></div>
<p>
x: {{x_loc}}<br/>
y: {{y_loc}}
</p>
<body>
However, I encountered an issue when attempting to bind 'x' and 'y' to variables in the scope of myCtrl
<div dragable x="{{x_loc}}" y="{{y_loc}}" style="...."></div>
This resulted in a generic invalid expression error. My directive code is as follows:
app.directive("dragable", function($document) {
dragable = {};
dragable.restrict = 'A',
dragable.link = function(scope, element, attrs) {
element.css({
top: scope.y + 'px',
left: scope.x + 'px'
});
function select(evt) {
... // get initial conditions
$document.on('mousemove',move);
$document.on('mouseup',deselect);
};
function move(evt){
... // perform error checking then
// update the location of the element
};
function deselect(evt){
$document.unbind('mousemove',move);
$document.unbind('mouseup',deselect);
};
$document.on('mousedown', select);
};
dragable.scope = {
x: "=",
y: "=",
};
return dragable;
});
If anyone has suggestions on how to resolve this issue, I would greatly appreciate it. Thank you!