ngDraggable icon indicating copy to clipboard operation
ngDraggable copied to clipboard

How to move an element i.e. drag without a drop zone?

Open dave-k opened this issue 9 years ago • 1 comments

Is it possible to move an element to a new location without specifying ng-drop? I have a modal-dialog that I would like to re-position on the screen.

<div ng-drag="true" aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
        </div>
        <div class="modal-body" ng-cancel-drag>
          <form role="form">
            <div class="form-group">
              <label for=""></label>
              <div class="">
                <textarea class="form-control" ng-model="textarea"></textarea>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer" ng-cancel-drag>
        </div>
      </div>
    </div>
</div>

dave-k avatar Oct 07 '15 15:10 dave-k

I think it is not possible with the current version of ngDraggable.js.

To achieve that you will need to modify library.

Quick fix (dirty, but working):

In the initialize() function add this line:

original_offset = element[0].getBoundingClientRect();

In the onmove() function change this two lines:

_tx = _mx - _mrx - _dragOffset.left; _ty = _my - _mry - _dragOffset.top;

to this:

_tx = _mx - _mrx - original_offset.left; _ty = _my - _mry - original_offset.top;

In the onrelease() function comment this line:

reset();

lahdo avatar Nov 19 '15 14:11 lahdo