Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div ng-controller="MyCtrl">
<div id="container-emote">
<div id="titre-emote">
Div
</div>
<div id="page-emote-1">
<div id="liste-emoji-1" >
<img id="emote" src='https://s31.postimg.org/dxxk7cfrf/emote.png'>
</div>
</div>
<button type="button">Get coordinates!</button>
</div>
<input type="hidden" name="source_x" id="source_x" ng-model="source_x"/>
<input type="hidden" name="source_y" id="source_y" ng-model="source_y"/>
<input type="hidden" name="id_emoji" id="id_emoji" ng-model="id_emoji"/>
</div>
CSS
#container-emote{
position: fixed;
height: 185px;
width: 100%;
bottom: 0px;
background-color: rgba(239, 239, 239, 0.85);
}
#titre-emote{
margin-top: 5px;
text-align: center;
font-size: 25px;
}
#liste-emoji-1{
margin-top: 20px;
margin-left: 10%;
width: 80%;
align-content: center;
align-items: center;
text-align: center;
}
JavaScript
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.source_x = {};
$scope.source_y = {};
$scope.id_emoji = {};
$scope.createEmote = function(a,b,c) {
alert(a);
alert(b);
alert(c);
};
$("#emote").draggable({
helper : 'clone',
cursorAt: { left: 35,
bottom : 0
},
stop:function(event,ui) {
var wrapper = $("#container-emote").offset();
var borderLeft = parseInt($("#container-emote").css("border-left-width"),10);
var borderTop = parseInt($("#container-emote").css("border-top-width"),10);
var pos = ui.helper.offset();
$scope.createEmote(pos.left - wrapper.left - borderLeft + 40, -(pos.top - wrapper.top - borderTop)+185,2 );
}
});
}