Is it possible to move a directive within a limited parent element?

Question

Is it possible to move a directive within a limited parent element?

Is there a way to limit the movement of an angular.js drag directive within the confines of its parent element?

You can see the problem I'm facing in this jsbin: http://jsbin.com/maxife/3/edit?html,css,js,output

javascript html css angularjs angularjs-directive

Answer 1

Answer №1

To achieve the desired outcome, it is necessary to make adjustments to the drag directive. The event.pageX and event.pageY properties indicate the position of the mouse pointer in relation to the left edge of the entire document. In order to attain this:

Modify these properties to be relative to the parent element.

<span my-draggable>Drag Me</span>

This may not align with our objective, as you need to extract the height and width attributes of the parent element first and then use offsetX / offsetY for positioning within the parent div block.

How can this be integrated into the directive? Follow this reference: Get element parent height inside directive in AnguarJS

An alternative approach involves constraining the x,y variables within the mousemove function.

By doing so, movement will be limited to the boundaries of the parent element, preventing any overflow beyond the element using CSS.

Here too, the height and width attributes of the parent element must be utilized, without altering the position or applying offsets. Simply include the following snippet before element.css({..}):

      if(x>27){
       x=27;
       }
      else if(x<0){
        x=0;
      }
      if(y>77){
        y=77;
      }
      else if(y<0){
        y=0;
      }

I have demonstrated this manually to provide an example prior to incorporating the parent attributes. Take note of the span's width and height if you wish to prevent any part of the span element from extending outside the div.

The complete module:

angular.module('dragModule', [])
.directive('myDraggable', ['$document', function($document) {
return {
  link: function(scope, element, attr) {
    var startX = 0, startY = 0, x = 0, y = 0;

    element.css({
     position: 'absolute',
     border: '1px solid red',
     backgroundColor: 'lightgrey',
     cursor: 'pointer'
    });

    element.on('mousedown', function(event) {
      // Prevent default dragging of selected content
      event.preventDefault();
      startX = event.pageX - x;
      startY = event.pageY - y;
      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove(event) {
      y = event.pageY - startY;
      x = event.pageX - startX;
      if(x>27){
         x=27;
       }
      else if(x<0){
        x=0;
      }
      if(y>77){
        y=77;
      }
      else if(y<0){
        y=0;
      }
      element.css({
        top: y + 'px',
        left:  x + 'px'
      });
    }

    function mouseup() {
      $document.off('mousemove', mousemove);
      $document.off('mouseup', mouseup);
    }
  }
};
}]);

View the JSbin here: JSbin link

Answer 2

To achieve the desired outcome, it is necessary to make adjustments to the drag directive. The event.pageX and event.pageY properties indicate the position of the mouse pointer in relation to the left edge of the entire document. In order to attain this:

Modify these properties to be relative to the parent element.

<span my-draggable>Drag Me</span>

This may not align with our objective, as you need to extract the height and width attributes of the parent element first and then use offsetX / offsetY for positioning within the parent div block.

How can this be integrated into the directive? Follow this reference: Get element parent height inside directive in AnguarJS

An alternative approach involves constraining the x,y variables within the mousemove function.

By doing so, movement will be limited to the boundaries of the parent element, preventing any overflow beyond the element using CSS.

Here too, the height and width attributes of the parent element must be utilized, without altering the position or applying offsets. Simply include the following snippet before element.css({..}):

      if(x>27){
       x=27;
       }
      else if(x<0){
        x=0;
      }
      if(y>77){
        y=77;
      }
      else if(y<0){
        y=0;
      }

I have demonstrated this manually to provide an example prior to incorporating the parent attributes. Take note of the span's width and height if you wish to prevent any part of the span element from extending outside the div.

The complete module:

angular.module('dragModule', [])
.directive('myDraggable', ['$document', function($document) {
return {
  link: function(scope, element, attr) {
    var startX = 0, startY = 0, x = 0, y = 0;

    element.css({
     position: 'absolute',
     border: '1px solid red',
     backgroundColor: 'lightgrey',
     cursor: 'pointer'
    });

    element.on('mousedown', function(event) {
      // Prevent default dragging of selected content
      event.preventDefault();
      startX = event.pageX - x;
      startY = event.pageY - y;
      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove(event) {
      y = event.pageY - startY;
      x = event.pageX - startX;
      if(x>27){
         x=27;
       }
      else if(x<0){
        x=0;
      }
      if(y>77){
        y=77;
      }
      else if(y<0){
        y=0;
      }
      element.css({
        top: y + 'px',
        left:  x + 'px'
      });
    }

    function mouseup() {
      $document.off('mousemove', mousemove);
      $document.off('mouseup', mouseup);
    }
  }
};
}]);

View the JSbin here: JSbin link

Is it possible to move a directive within a limited parent element?

Answer №1

Similar questions

Using expressJS and MongoDB to create a secure login and registration system

Having trouble syncing a controller with AngularJS

An easy way to create a hover effect on a URL link and dynamically change the

I am attempting to utilize a ref in React to access an element within a MUI modal, but I am encountering issues as the reference to the

Reacting to multiple checkboxes in a check handling system

Deselect a radio button with a click event using jquery

Solving template strings in a future context

Eliminate JavaScript that blocks rendering:

What functionality does this method perform within React.js?

"Utilizing AJAX for real-time search to target the final

Animating progress bars using React Native

Single array returned by observable

The selected element does not support the addition of setSelectionRange

Slide inside a div to move content

Can you explain the meaning of the code provided below?

Why styled-components namespace problem in React Rollup build?

Encountering an error stating "cloudinary.uploader is undefined" while attempting to delete media files from Cloudinary

What is the most appropriate unit of measurement for creating a responsive design?

Tips for centering links in the navigation bar on Bootstrap 5 when viewing in a small size

Modifying the selected color of DropDownMenu List items