Jquery Draggables:删除元素会更改其他删除元素的位置

2024-04-11

当放置/放置元素(通过从一个 DIV 拖动到另一个 DIV),然后删除放置的 DIV 中的一个元素时,其中一些元素会更改位置。

这是一个测试场景:http://jsfiddle.net/TcYHW/8/ http://jsfiddle.net/TcYHW/8/

以及主要代码:

<div id="dropwin"></div>
<div id="dragables">
    <div id="d1" class="d"></div>
    <div id="d2" class="d"></div>
    <div id="d3" class="d"></div>
    <div id="d4" class="d"></div>
</div>


$(".d").draggable({
        containment: '#dropwin',
        stack: '#dragables div',
        cursor: 'move',
      });

我怎样才能避免这种情况?

我发现,元素放置在相对于起始位置的位置。即使有些被移除,我怎样才能让它们粘在掉落的位置?

我发现了两个相似的问题,但没有令人满意的答案:

在 Jquery div 中删除,可拖动且可调整大小 https://stackoverflow.com/questions/7514337/remove-in-jquery-divs-with-draggables-and-resizables

jQuery 可拖动删除而不改变其他元素的位置 https://stackoverflow.com/questions/5114638/jquery-draggable-removing-without-changing-position-of-other-elements


您需要对元素进行定位absolute。那么被删除的盒子就不会影响其他元素的流动。

你可以只使用 css 来定位它们absolute:

.d { 
    width: 50px;
    height: 50px;
    margin: 10px;
    display: inline-block;
    position: absolute;
}

但这样你就必须手动放置每个盒子。诀窍是让它们保持在适当的位置static (or relative after .draggable()完成),然后使用 javascript 设置它们的位置并将它们设置为absolute定位:

$('.d').each(function() {
    var top = $(this).position().top + 'px';
    var left = $(this).position().left + 'px';
    $(this).css({top: top, left: left});
}).css({position: 'absolute'});

Demo: http://jsfiddle.net/jtbowden/5S92K/ http://jsfiddle.net/jtbowden/5S92K/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery Draggables:删除元素会更改其他删除元素的位置 的相关文章

随机推荐

  • 如何从私有 Dockerhub 存储库自动运行 docker?

    我有一个运行 Docker 的 EC2 服务器 我想将以下内容添加到User Data所以我的私有 Dockerhub 镜像将在服务器启动时被拉取 运行 如下所示 bin bash sudo docker run p 3333 3333 d
  • Hibernate Spring - @OneToMany - 外键未存储在数据库中

    要求 对于食谱应用程序 用户可以输入食谱名称和成分 用户可以在JSP页面上输入食谱的多种成分 数据库模型 创建了 2 个表 食谱可以有不止一种成分 Recipe recipe id primary key name Ingredient i
  • org.eclipse.swt.SWTException:表刷新中的“小部件已释放”

    该应用程序是基于 Eclipse 3 6 的 RCP 因此 jface 版本 3 5 2 在 Windows 7 上运行 我有一个自定义 View 类 其中包含TableViewer并打电话refresh 在上面 有时 但不是很常见 它会导
  • 即使出现重复键错误,Pymongo 也会插入 id

    我正在开发一个 Flask 应用程序并使用 mongodb 在一个端点中 我获取了 csv 文件并将内容插入到 mongodb 中insert many 在插入之前 我创建一个唯一索引以防止 mongodb 上的重复 当没有重复时我可以到达
  • 将文本预测脚本 [Markov Chain] 从 javascript 转换为 python

    过去几天我一直在尝试转换这个js脚本 http blog javascriptroom com 2013 01 21 markov chains 到Python代码 到目前为止我的实现 主要是blindfull cp 一些小的修复 impo
  • Tensorflow 2:如何在 GPU 和 CPU 之间切换执行?

    In tensorflow1 X 独立keras2 X 中 我曾经使用以下代码片段在 GPU 上的训练和 CPU 上运行推理之间切换 由于某种原因 我的 RNN 模型速度要快得多 keras backend clear session de
  • Cosmosdb sql api 和 Cosmosdb cassandra api 之间的存储差异是什么

    大多数文章都提到 如果我们使用 Cosmos Db 并新创建我们的应用程序 我们应该使用 Cosmos db sql api 当您已经将应用程序与实际的 mongo 和 cassandra 集成并且我们希望快速迁移到 cosmosdb 并且
  • 不带端口的 SQL Server 命名实例远程连接

    我有一个 SQL Server Express 的命名实例 我想让它在网络上可见 我能够做到这一点 但其他机器只能连接到指定端口号 即使它是默认端口 例如 其他机器可以使用以下方式连接到我的机器 1433 是 SQL Server 的默认端
  • CSS:可以将 Webkit 滚动条“推”到内容中吗?

    通常滚动条的位置如下 content scrollbar 我基本上希望在 自定义 滚动条和可
  • 在 iOS 中以编程方式清空缓存

    有谁巧合地知道我如何清空我正在开发的iOS应用程序的缓存内存 在它进入后台 applicationDidEnterBackground 的那一刻 我已经调查了 NSCache 但我仍然无法理解如何检索缓存以基本上删除 释放它 你说的是这个吗
  • powerpoint vba将某些幻灯片导出为pdf

    我试图在调用此函数时将选定的幻灯片导出为 pdf 这段代码运行得非常好 但给我的是整个幻灯片的 PDF 格式 Sub Export to PDF ActivePresentation ExportAsFixedFormat ActivePr
  • 最小购物车金额(WooCommerce 中的特定产品除外)

    我只允许在我的网站上进行最低价值 15 欧元的订单 但希望对一种产品进行例外处理 如果有人知道如何在这方面帮助我 我将非常感激 最小订单值的编码如下 有人知道我如何调整它以通过产品 ID 排除一种产品吗 add action woocomm
  • 内存中的方法表示是什么?

    在思考一下 Java C 编程时 我想知道属于对象的方法如何在内存中表示 以及这一事实如何涉及多线程 是为内存中的每个对象单独实例化一个方法还是执行 同一类型的所有对象共享该方法的一个实例 如果是后者 执行线程如何知道哪个对象是 要使用的属
  • PHP 发送的 ZIP 存档已损坏

    我正在使用 php ZipArchive 即时创建 zip 文件并将其发送回用户 我将压缩文件暂时存储在文档根目录上方的文件夹中 然后将其与代码一起发回 header Content type application zip header
  • 何时使用 $ 何时不使用

    我使用以下变量选择了一个控件 var txt text1 现在 当我必须处理文本框上的事件时 我是否必须将其引用为 txt 或 txt 即可 txt keydown function or txt keydown function 有什么好
  • 为什么 File::isDirectory 作为 FileFilter 可以正常工作?

    Why 文件 是目录在下面的示例中 作为 FileFilter 工作正常吗 File files new File listFiles File isDirectory listFiles方法需要一个FileFilter作为参数 publi
  • Android ActionBar 重新创建选项菜单

    在Android中使用ActionBar时 如何刷新选项菜单 我尝试隐藏和显示该栏 并使用 getSupportActionBar 获取它的新实例 我正在尝试实现一个登录 注销按钮 该按钮将根据用户的状态动态更改 这是我的 onCreate
  • Google Big-query api 403-禁止异常

    当我使用 Big Query API 的 java 应用程序执行查询时 出现以下 JSON 异常 以下是我得到的异常 error errors domain global reason accessDenied message Access
  • 使用 regexp_substr 选择逗号之间的单词(不包括双引号)

    我试图从逗号分隔列表中返回字符串列表 但是 我仍然想返回字符串中出现在双引号之间的逗号 这是我目前的声明 SELECT regexp substr one two three four five six seven eight nine n
  • Jquery Draggables:删除元素会更改其他删除元素的位置

    当放置 放置元素 通过从一个 DIV 拖动到另一个 DIV 然后删除放置的 DIV 中的一个元素时 其中一些元素会更改位置 这是一个测试场景 http jsfiddle net TcYHW 8 http jsfiddle net TcYHW