我们如何在可放置 div 中释放项目的确切位置元素上放置

Posted 2023-05-08

【中文标题】我们如何在可放置 div 中释放项目的确切位置元素上放置

【英文标题】：How can we drop on exact position element where we release the item in droppable div

【发布时间】：2018-09-26 23:48:02

【问题描述】：

我正在研究拖放功能，它运行良好，但是当我拖放元素时，它并没有在我释放它的同一位置释放，我知道我遗漏了一些东西，在这里我添加了我的所有代码，可以任何人请帮助我，我在这里添加了我所有的代码，只是帮助它工作，谢谢

<script>

            $(".draggable_image").draggable(
                helper: 'clone',
            );
$(".droppable").droppable(
                accept: ".draggable_image",
                drag: function()
                    var offset = $(this).offset();
                    var xPos = offset.left;
                    var yPos = offset.top;
                ,
                drop: function (event, ui) 
                    if (!ui.draggable.hasClass("dropped")) 
                        var uniqueId = new Date().getTime();
                        $(".center-div").append($(ui.draggable).clone().addClass("dropped").attr('id',uniqueId).draggable());
                        $(".dropped img").resizable(ghost: true);
                        ui.draggable.draggable('enable');
                    
                
            );
</script>

  

<style>
.center-div 
    width: 80%;
    height: 80%;		
    background: grey;
    position: absolute;
    top:240px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;


.line
    height: 47px;
    border-bottom: 1px solid black;
    position: absolute;

.line-complete:hover 
    //border: 1px solid white !important;
    //background: white !important;
    //padding: 0px;
    //font-size: 1.2em;
    cursor: pointer;

.line-circle 
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 50px;
    color: #fff;
    line-height: 5px;
    text-align: center;
    background: grey; //red
    margin-left: -3px !important;
    margin-top: -5px !important;
    z-index: 9999;



.draggable  padding: 0.5em; float: left; margin: 10px 10px 10px; 
.draggeble_exist  padding: 0.5em; float: left; margin: 10px 10px 10px; 


.button 
    font-size: 6px !important;


 

</style>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<div class="container">
<div class="row">
		<div class="col-md-12">
  <div id="floorplan_images">
  <img class="draggable_image" src="http://hfpbuilder-dev.serverdatahost.com/images/vessel_drum.png"  >
  </div>
</div>
</div>
</div>  
<div class="center-div ui-widget-header droppable">
	    
	</div>

【参考方案1】：

在将其附加到<div> 之后，您将需要使用.position() 来设置它的位置。

例如：

$(function() 
  $(".draggable_image").draggable(
    helper: 'clone',
    zIndex: 1000
  );
  $(".droppable").droppable(
    accept: ".draggable_image",
    drag: function() 
      var offset = $(this).offset();
      var xPos = offset.left;
      var yPos = offset.top;
    ,
    drop: function(event, ui) 
      var item = ui.draggable;
      if (!item.hasClass("dropped")) 
        var uniqueId = new Date().getTime();
        var newItem = item.clone();
        newItem.addClass("dropped");
        newItem.attr("id", uniqueId);
        newItem.appendTo($(this))
          .draggable(
            handle: $(this).not(".ui-resizable-handle"),
            containment: $(".droppable")
          );
        newItem.position( of: event
        );
        newItem.resizable(
          ghost: true
        );
       else 
        return true;
      
    
  );
);

.center-div 
  width: 80%;
  height: 80%;
  background: grey;
  position: absolute;
  top: 240px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;


.line 
  height: 47px;
  border-bottom: 1px solid black;
  position: absolute;


.line-complete:hover 
  //border: 1px solid white !important;
  //background: white !important;
  //padding: 0px;
  //font-size: 1.2em;
  cursor: pointer;


.line-circle 
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  line-height: 5px;
  text-align: center;
  background: grey; //red
  margin-left: -3px !important;
  margin-top: -5px !important;
  z-index: 9999;


.draggable 
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px;


.draggeble_exist 
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px;


.button 
  font-size: 6px !important;

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="floorplan_images">
        <img class="draggable_image" src="http://hfpbuilder-dev.serverdatahost.com/images/vessel_drum.png"  >
      </div>
    </div>
  </div>
</div>
<div class="center-div ui-widget-header droppable">
</div>

希望有帮助！