使用jquery ui将可拖动元素居中放置在可丢弃的内部

Centering draggable elements inside droppable using jquery-ui

本文关键字：内部 ui jquery 拖动 使用 元素      更新时间：2023-09-26

下面是我迄今为止所取得的成就的一个例子。。。

$(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.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div class="droparea">
  <div class="item"></div>
</div>
<div class="droparea">
</div>

有时它拒绝将.itemdiv居中….itemdiv必须拖到.droparea元素的内部，否则它在释放item元素后不会将.item元素居中。只是想知道是否有更优雅的方法可以使一个可拖动的div以最接近的可丢弃元素为中心。

您可以使用jQuery UI内置的position()实用程序方法来居中放置放置的项目，如下所示：

$(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.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/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>

我在本主题中找到了解决方案，很抱歉有重复的问题。

当一个元素被拖动到另一个容器并被捕捉到该容器时，如何强制jquery将其居中？

因此，在这种情况下，解决方案如下：

$( 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.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/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>

相关文章：