Question

以下是我迄今为止所取得的成就......

$(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>

有时候它会拒绝将.item div中心化...... .item div必须被拖入.droparea元素的内部，否则它不会居中.item释放item元素后的元素。只是想知道是否有更优雅的方法使可拖动的div居中到最近的可放置元素。

Answer 1

您可以使用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>

Answer 2

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

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

所以在这种情况下，解决方案看起来像这样：

$( 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>

使用jquery-ui将dropggable中的可拖动元素居中

2 个答案: