Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Programmatic Dragging

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?

User Gravatar


Posted Nov 12 2013 15:46 UTC


  • Assigned To graham-p-heath
  • Solved
  • angular.js

1 Replies

I solved this with

<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>


    $scope.mouseDown = function (event, item, index, element) {

      $scope.dragTimeout = $timeout(function () {
        $scope.pickUpWidget(event,item, index, element);        
    $scope.pickUpWidget = function (event,item,index,element){
        item.floating = true;
        $("#widgetDraggable"+index).trigger(event); // <-- the line that through me, seems easy enough!

But I'd still pay for a jquery-less solution, just out of curiosity.

User Gravatar


Posted Nov 12 2013 16:26 UTC


This didn't solve your task? Get your own custom solution.

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions