Hi all …!!
i am trying to have HTML element dragging around the screen but…
===>CONDITION is that from specific DIV to some specific DIV
like i have three section in my screen middle one contains list item, bottom one contains the 10 img tag that i want to drag to the top div element…
here is so far i have done, I create 10 img tag surrounded with div tag and its is draggable also around the screen i need some condition based on that i restrict img tag to not dragged at wrong div !!!
var app = angular.module('starter', ['ionic','ngCordova','ngStorage']);
// ========================== Controller ==========================
app.controller('TempCtrl',['$scope',function($scope){
// $scope.draggedStyle = {};
// $scope.draggedStyle_1 = {};
$scope.number = [1,2,3,4,5,6,7,8,9,10];
$scope.onDrag = function(event) {
if(event.target.className==="number_1"){
$scope.draggedStyle_1 = {
'left': event.gesture.center.pageX+'px',
'top': event.gesture.center.pageY+'px'
};
....continue to 10 (i have 10 ing tag)
}
}
$scope.onRelease = function(event) {
console.log("you put number :"+event.target.id);
}
Here is my HTML :
<ion-view view-title="Home">
<ion-content ng-controller="TempCtrl" class = "homeContent" scroll="false">
<div class="upper" style="float: left;
width: 300px;
height: 300px;
margin: 50px;
padding: 10px;
border: 1px solid black";>
</div> <========================== in only this div img tag should be draggable
<div class="middle">
This is middle tage where IMG tag is not to be draggable
</div>
<div class="bottom">
<div ng-repeat="i in number">
<div on-drag="onDrag($event)" on-release="onRelease($event)" id="dragged_{{i}}" class="draggable" ng-style="draggedStyle_{{i}}" style="position: absolute; cursor: pointer;">
<img class="number_{{i}}" id="{{i}}" src="img/number-one-inside-a-circle.svg" height="50px" width="50px">
</div>
</div>
</div> <=========================== img tag is available here
</ion-content>
</ion-view>