正文 

当前位置： 首页 > 问答 >

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

     2023-05-08     186

关键词：

【中文标题】我们如何在可放置 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】：

在将其附加到&lt;div&gt; 之后，您将需要使用.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>

希望有帮助！

【讨论】：

拖放 div 并存储位置

...我也可以在确切位置安排和显示拖动的divs。我的问题是如何获得divs的位置并 查看详情

如何在 JavaFX 中使用 HBox 将某些元素放置在画布上的特定位置？ [关闭]

】如何在JavaFX中使用HBox将某些元素放置在画布上的特定位置？[关闭]【英文标题】：HowcanIuseHBoxinJavaFX,toplacecertainelementsataspecificlocationonthecanvas?[closed]【发布时间】：2021-11-1802:59:09【问题描述】：新手！我知道这是我整个项目中最... 查看详情

当我在可拖动中使用轴属性时出现可放置问题

】当我在可拖动中使用轴属性时出现可放置问题【英文标题】：DroppableissuewhenIuseaxispropertyindraggable【发布时间】：2013-07-1221:59:02【问题描述】：我在仅水平应用可拖动时遇到拖放问题。我创建了一个可拖动的div，它只能水平拖动... 查看详情

javascript中ondragover是啥事件

...数据/元素不能放置到其他元素中。如果要实现改功能，我们需要防止元素的默认处理方法。我们可以通过调用event.preventDefault()方法来实现ondragover事件。拖放是HTML5中非常常见的功能。更多信息可以查看我们HTML教程中的HTML5拖放... 查看详情

使用 jQuery UI 使可拖动元素在可放置中可排序

】使用jQueryUI使可拖动元素在可放置中可排序【英文标题】：MakedraggableelementsortablewithindroppableusingjQueryUI【发布时间】：2014-01-2523:50:09【问题描述】：已解决所以我对sortable()和connectWith属性进行了更多研究，发现解决方案比我预... 查看详情

在 jquery drop UI 中，如何使用正确的鼠标位置将拖动元素克隆到放置位置？

】在jquerydropUI中，如何使用正确的鼠标位置将拖动元素克隆到放置位置？【英文标题】：InjquerydropUI,howcanIclonedragelementintodropplacewithcorrectmouseposition?【发布时间】：2012-03-2802:01:59【问题描述】：假设我有一个带有可拖动元素的面... 查看详情

撸一个vue项目实现拖拽功能(代码片段)

...件变得更加容易。拖放事件API中有八个拖放事件可以用在我们程序中。drag：可拖动的项目被拖动dragstart：开始拖动可拖动元素dragend：拖动结束（例如放开鼠标）dragenter：拖动的项目进入可放置元素dragleave... 查看详情

如何将可拖动的元素放入可排序的元素中，放置的项目不是原始元素而是自定义助手

】如何将可拖动的元素放入可排序的元素中，放置的项目不是原始元素而是自定义助手【英文标题】：Howtodropadraggableintoasortable,thedropppeditemisnottheoriginalelementbutacustomhelper【发布时间】：2016-06-2703:42:18【问题描述】：jQuerydraggeble/so... 查看详情

droppable元素位置计算不正确(代码片段)

...basilidze/moafzcx8/2/将项目拖放到表中以查看问题。任何想法如何解决这一问题？答案你有点不清楚你要做的整体事情。我建议使用jQueryUI.position()来帮助将项目放在单元格中。在你的drop中考虑这个：var$dz=$(this);varfCount=$dz.find(".foo").l... 查看详情

拖放到列表视图上，如何获取放置的项目位置

】拖放到列表视图上，如何获取放置的项目位置【英文标题】：Dragginganddroppingontoalistview,howtogettheitempositionthatwasdroppedon【发布时间】：2017-12-0616:31:48【问题描述】：我有一个项目列表，当项目被拖动时，它可以被拖放到另一个项... 查看详情

Java Hashtable 如何根据 hashcode 计算元素的放置位置？ [复制]

】JavaHashtable如何根据hashcode计算元素的放置位置？[复制]【英文标题】：HowdoesJavaHashtablecalculatewheretoplaceanelementbasedonhashcode?[duplicate]【发布时间】：2021-02-2713:12:13【问题描述】：在Java中，Hashtable具有数量等于其容量的桶。现在它... 查看详情

如何在可滚动活动中的 ListView 下方放置一个按钮？

】如何在可滚动活动中的ListView下方放置一个按钮？【英文标题】：HowtoPlaceaButtonbelowaListViewinaScrollableActivity?【发布时间】：2020-01-2520:38:04【问题描述】：<?xmlversion="1.0"encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.... 查看详情

AngularJS，ngDraggable - 输入框在可拖动元素内不可编辑

】AngularJS，ngDraggable-输入框在可拖动元素内不可编辑【英文标题】：AngularJS,ngDraggable-inputboxnoteditableinsidedraggableelement【发布时间】：2017-06-2910:40:56【问题描述】：我正在使用ngDraggable模块，一切正常，除了输入框被禁用时，它们... 查看详情

jQuery - 在可排序列表中操作删除的元素

...方式更改主列表（.field）。它工作正常，但我无法弄清楚如何在可排序列表中操作已删除的字段。我可以通过 查看详情

在可放置容器内防止 jQueryUI 可排序触发可放置事件

】在可放置容器内防止jQueryUI可排序触发可放置事件【英文标题】：PreventjQueryUIsortabletriggeringdroppableeventswheninsideadroppablecontainer【发布时间】：2020-02-1209:42:02【问题描述】：我有一个可放置的容器，其中还包含可排序的元素。这... 查看详情

如何让div固定在页面而不随着滚动条随意滚动

1、首先我们新建一个web项目，主要用到了html文件和css文件。2、然后在html文件中，有图中的代码，引入css文件和设置一个div标签。3、然后这里是css样式文件，主要看图中红框中内容，使用fixed定位方式。4、然后运行项目后，可... 查看详情

如何在可编辑的 DIV 中输出美化的原始 HTML 代码

】如何在可编辑的DIV中输出美化的原始HTML代码【英文标题】：HowtooutputprettifiedrawHTMLcodeinsideanEditableDIV【发布时间】：2021-09-2009:15:44【问题描述】：我一直试图在可编辑的DIV中输出原始HTML，但&lt;div&gt;被注释掉了。这就是我... 查看详情

在可编辑div中定位光标和设置光标(代码片段)

...光标对象是只有当你选中某个元素的时候才会出现的。当我们去点击一个输入框的时候，就会产生一个选中对象selection，就是我们可以看到的文字变成蓝色的那个区域，selection在火狐浏览器可以直接用window.getSelection()... 查看详情