javascript - Centering draggable elements inside droppable using jquery-ui - Stack Overflow

admin管理员组

文章数量:1430346

Below is an example of what I have been able to achieve so far...

$(document).ready(function() {
  $(".item").draggable({
    revert: 'invalid',
    snapMode: 'inner',
    scroll: false,
    stack: false,
    drag: function(event, ui) {
      $(".droparea").removeClass("highlight");
    }
  });
  $(".droparea").droppable({
    tolerance: 'intersect',
    drop: function(event, ui) {
      var drop_el = $(this).offset();
      var drag_el = ui.draggable.offset();
      var left_end = (drop_el.left + ($(this).width() / 2)) - (drag_el.left + (ui.draggable.width() / 2));
      var top_end = (drop_el.top + ($(this).height() / 2)) - (drag_el.top + (ui.draggable.height() / 2));
      $(this).addClass("highlight").find("p");
      ui.draggable.animate({
        top: '+=' + top_end,
        left: '+=' + left_end
      });
    }
  });
});

.item {
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-top: 50%;
  top: -50px
}
.droparea {
  width: 150px;
  height: 150px;
  float: left;
  margin: 10px;
  border: 1px solid #000;
}
.highlight {
  border: 1px solid blue
}

<script src=".11.1.min.js"></script>
<script src=".10.4/jquery-ui.js"></script>

<div class="droparea">
  <div class="item"></div>
</div>

<div class="droparea">

</div>

Below is an example of what I have been able to achieve so far...

$(document).ready(function() {
  $(".item").draggable({
    revert: 'invalid',
    snapMode: 'inner',
    scroll: false,
    stack: false,
    drag: function(event, ui) {
      $(".droparea").removeClass("highlight");
    }
  });
  $(".droparea").droppable({
    tolerance: 'intersect',
    drop: function(event, ui) {
      var drop_el = $(this).offset();
      var drag_el = ui.draggable.offset();
      var left_end = (drop_el.left + ($(this).width() / 2)) - (drag_el.left + (ui.draggable.width() / 2));
      var top_end = (drop_el.top + ($(this).height() / 2)) - (drag_el.top + (ui.draggable.height() / 2));
      $(this).addClass("highlight").find("p");
      ui.draggable.animate({
        top: '+=' + top_end,
        left: '+=' + left_end
      });
    }
  });
});

.item {
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-top: 50%;
  top: -50px
}
.droparea {
  width: 150px;
  height: 150px;
  float: left;
  margin: 10px;
  border: 1px solid #000;
}
.highlight {
  border: 1px solid blue
}

<script src="http://code.jquery./jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis./ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<div class="droparea">
  <div class="item"></div>
</div>

<div class="droparea">

</div>

Sometimes it refuses to center the .item div... The .item div has to be dragged into the inner part of the .droparea element, otherwise it won't center the .item element after releasing the item element. Just wondering if there is any more elegant way to make a draggable div centered into the closest droppable element.

• javascript
• jquery
• jquery-ui
• jquery-ui-draggable
• jquery-ui-droppable

Share Improve this question Follow edited Oct 28, 2014 at 17:58 T J 43.2k1313 gold badges8686 silver badges142142 bronze badges asked Oct 27, 2014 at 14:14 WrackerWracker 61911 gold badge1111 silver badges3232 bronze badges 5

• I have just noticed that sometimes it refuses to center the .item div... The .item div has to be dragged into the inner part of the .droparea element...otherwise it won't center the .item element after releasing the item element. – Wracker Commented Oct 27, 2014 at 14:25
• 1 There's a trail after the red square when droppping it (in chrome), you can fix this with outline: 1px solid transparent :) – Johan Karlsson Commented Oct 27, 2014 at 14:27
• For me it is working fine... are you talking about the revert when more than 50% of the draggable is outside droppable..? – T J Commented Oct 27, 2014 at 17:06
• as I have already mentioned , sometimes I need to drag the draggable div into the center of droppable div , othwerwise it won't snap to the center of the droppable element. Now when I changed the tolerance to "touch". It's kinda working as I wanted to but it's now occasionally centering the draggable element between two droppable elements. – Wracker Commented Oct 28, 2014 at 7:36
• I have just found a working example of what I wanted to achieve.. jsfiddle/jeschafe/JTKBR – Wracker Commented Oct 28, 2014 at 7:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can use jQuery UI's inbuilt position() utility method for centering the dropped item as follows:

$(document).ready(function() {
  $(".item").draggable({
    scroll: false,
    revert: 'invalid',
    stack: false,
    cursor: "pointer",
    drag: function(event, ui) {
      $(".droparea").removeClass("highlight");
    }
  });
  $(".droparea").droppable({
    accept: ".item",
    drop: function(event, ui) {
      var $this = $(this);
      $(".highlight").removeClass("highlight");
      $this.addClass("highlight");
      ui.draggable.position({
        my: "center",
        at: "center",
        of: $this,
        using: function(pos) {
          $(this).animate(pos, "slow", "linear");
        }
      });
    }
  });
});

.item {
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
.droparea {
  width: 150px;
  height: 150px;
  float: left;
  margin: 2px;
  border: 1px solid #000;
  outline: 1px solid transparent
}
.highlight {
  border: 1px solid blue
}

<script src="http://code.jquery./jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis./ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<div class="droparea">
  <div class="item"></div>
</div>


<div class="droparea"></div>
<div class="droparea"></div>

I found the solution in this topic, apologies for a duplicate question.

How do I force jquery to center an element when it is dragged to and snapped to another container?

So in this case the solution would look like this:

$( document ).ready(function() {
	$( ".item" ).draggable({
		scroll: false,
		revert: 'invalid',
		stack: false,
		create: function(){$(this).data('position',$(this).position())},
		cursor: "pointer",
		start:function(){$(this).stop(true,true)},
		drag: function(event, ui)
		{
			$( ".droparea" ).removeClass( "highlight" );
		}
	});
	$( ".droparea" ).droppable({
		accept: ".item",
		drop: function( event, ui ) {
			$( this ).addClass( "highlight" ).find( "p" );
			snapToMiddle(ui.draggable,$(this));
		}
	});
});

function snapToMiddle(dragger, target){
    var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
    var leftMove= target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
    dragger.animate({top:topMove,left:leftMove},{duration:200,easing:'linear'});
}

.item { position: relative; margin: 0 auto; width: 100px; height: 100px; border: 1px solid red;}
.droparea { width: 150px; height: 150px; float: left; margin: 2px; border: 1px solid #000; outline: 1px solid transparent}
.highlight {border: 1px solid blue}

<script src="http://code.jquery./jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis./ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<div  class="droparea">
	<div class="item"> </div> 
</div>


<div class="droparea"> </div>
<div class="droparea"> </div>

本文标签： javascriptCentering draggable elements inside droppable using jqueryuiStack Overflow