CODEWITHSUNDEEP
angularjstriggersjquery-ui-draggable
Graham P Heath
Graham P Heath

Reputation: 7389

Angular Dragdrop Programatic pick up

On my page I'm handling the drag and drop of widgets using your angular-dragdrop. The behavior I'm striving for is the same as rearranging apps on iOS, press-and-hold to enter drag mode, once you've entered the mode, the widgets become draggable.

To do this I have created a custom ng-mousedown which uses $timeout to trigger the rest of the widgets to become draggable. The $timeout callback should also attach the current object to the cursor, programmatically, but I can't seem to initiate the dragging from inside this method. I've tried the standard jQuery UI draggable invocation: $("#widget" + id ).trigger("mousedown.draggable")

How would I do this using angular-dragdrop?

Upvotes: 1

Views: 218

Answers (1)

Graham P Heath
Graham P Heath

Reputation: 7389

I solved this with $("#widgetDraggable" + index).trigger(event); as in:

<div class="drag" ng-model="widgets"
     jqyoui-draggable="{ index: {{$index}} }" 
     data-item="{{item}}" id="{{ 'widgetDraggable' + $index }}"
     ng-mousedown="mouseDown( $event, this, $index, item);">
 --Widget Template--
</div>

and

$scope.mouseDown = function (event, item, index, element) {
  $scope.dragTimeout = $timeout(function () {
    $scope.pickUpWidget(event,item, index, element);        
  }, 1000);
};

$scope.pickUpWidget = function (event, item, index, element){
  item.floating = true;
  setAllWidgetsToDrag(true);
  // The line that threw me, seems easy enough:
  $("#widgetDraggable"+index).trigger(event); 
}

But I'd still be interested in a less jQuery heavy solution. Just out of curiosity. I'm even offering a $25 bounty: http://www.codersclan.net/ticket/127

Upvotes: 1

Related Questions