Define the boundary of the arega for a dredgeable object in 'swingdrag'

Question

Define the boundary of the arega for a dredgeable object in 'swingdrag'

Navigation

#1 by (0 votes)

0

I have this example of jQuery UI plugin - swingdrag.

This plugin has several functions, but it does not have the function to set the limits of the object that is dragged.

For example: - I have a Main div (500x500px) and inside I have the draggable object (200x200px). How to set the area limit (500x500) for that object? - Or for example, to establish the limit of the area that occupies all the resolution of the monitor, so that it does not happen as in the link that leaves.

PS: Why do I want to use jQuery swingdrag Plugin and not the draggable library? Because the first has nice effects (shadow, angle of rotation, etc ...)

jquery html5 css

asked by Oren Diaz 08.10.2017 в 18:45

source

1 answer

Run an Asynctask within a fragment with a listview Validate a textBox in C # Visual Studio WindowsForms

score 0 · Accepted Answer

I already solved it.

Run the plugin - swingdrag with Draggable Widget.

On the one hand comes the code of swingdrag that gives better visualization to my draggable object and on the other hand query of Draggable Widget that calculates limits of the area and other physical.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	  
	  	<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
	<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
	<script src="dist/jquery.ui.swingdrag.min.js"></script>
      
      <style>
         .draggable-4 { 
            width: 90px; height: 50px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0;
            border: 1px solid red;  
            background-color:#B9CD6D;
         }
         .droppable-7 { 
            width: 100px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
            border: 1px solid black; 
            background-color:#A39480;
         }
         .droppable.active { 
            background-color: red; 
         }
		 
      </style>
      
      <script>
         $(function() {
            $('.draggable-4').draggable({ 
			containment: "window",
			revert: true });
            $('.droppable-7').droppable({
               hoverClass: 'active',
               drop: function(e, ui) {
                  $(this).html(ui.draggable.remove().html());
                  $(this).droppable('destroy');
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "i'm destroyed!" );
               }
            });
         });
		 
      </script>
   </head>
   
   <body>
      <div class = "draggable-4"><p>drag 1</p></div>
      <div class = "draggable-4"><p>drag 2</p></div>
      <div class = "draggable-4"><p>drag 3</p></div>

      <div style = "clear: both;padding:10px"></div>

      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
   </body>
   
   	<script>
		$(".draggable-4").swingdrag({
			rotationAngleDeg: 8,
			showShadow: true,
			pickUpScaleFactor: 1.1
		});
		
	</script>
</html>