Wrong position of elements being dragged within a modal

[drinkbird]

I've tried using angular-sortable-view within a bootstrap modal window, but when an element is being dragged, it jumps to the right side of the screen.

I presume that happens because the modal is absolutely positioned, but the directive doesn't consider that while calculating the value for 'left' positioning.

[jegorami]

Same issue here.

[JSOdin]

having the same issue

[gehrmanng]

Have you tried to use sv-element="{containment:'.myModalWindow'}"? I had the same behavior that my dragged element jumped somewhere else and above code helped me.

[StefanoVollono]

same issue

[drinkbird]

Thanks @gehrmang I will give it a try

[StefanoVollono]

1. I add: sv-element="{containment:'.myModalWindow'}"

2. In my css, I change the vertical align of modal from "transform" to negative margin .myModalWindow { height: 666px; min-height: 0; position: absolute; right: 0; top: 50%; // transform: translate(0, -50%); // NOT GOOD FOR DRAG margin-top: -333px; // THIS SOLVE FOR ME }

i hope help you

[TheLostBrain]

If you're using bootstrap / ui-bootstrap (angular) modals and looking for a simple one-liner fix here it is:

.modal-dialog { transform: none !important; }

Note: This override is obviously far reaching so just modify as you see fit.

The caveat here is that modals no longer slide down but just fade in (which I actually like better).

Now that the dragged elements are being positioned properly you can constrain them to a particular area using the following line on the draggable item's dom element as mentioned by others above:

sv-element="{containment:'.some-class-that-is-on-the-constraining-parent-dom-element'}"

Credit and thanks to the previous posters because I was pulling my hair out (and there's not much left) trying to figure out what the heck was causing the incorrect positioning in the first place!

[mbryk]

^ I didn't originally see this answer, which works great, so I wrote a directive to make the dragged item account for the modal position.

app.directive('svFix', ['$window', '$timeout', function($window, $timeout){
  return {
    restrict: 'A',
    link: function(scope, el) {
      angular.element($window).on('resize', resize);
      var styleEl = $('<style>').appendTo('head');
      $timeout(setTransform, 1000); // Waits for the modal to finish it's animation, so that the position values are correct..

      scope.$on('$destroy', function() {
        angular.element($window).off('resize', resize);
        styleEl.remove();
      });

      function setTransform() {
        var rect = el[0].getBoundingClientRect();
        var propStr = 'transform: translate(-' + rect.left + 'px, -' + rect.top + 'px);';
        styleEl.html('.sv-helper{' + 
          '-webkit-' + propStr
          '-ms-' + propStr
          propStr +
        '}', 0);
      }
      function resize() {
        if(styleEl) setTransform();
      }      
    }
  };
}]);

Just add sv-fix attribute to the outer-most element in the modal-body!