jQuery-UI 可拖动和可排序

2024-02-15

所以我一直在研究这个例子:http://jqueryui.com/demos/draggable/#sortable http://jqueryui.com/demos/draggable/#sortable我已经在我的产品上实现了这一点。然而我想做两个重大改变。

  1. 我不希望第二个列表(在我的示例中为 toList)可以自行排序。我只希望它接受第一个列表中的项目(在我的示例中为 fromList)。

  2. 当用户从第一个列表(fromList)拖动一个项目并将其放入第二个列表(toList)时,我希望该项目被强制到底部。

建议?这是我迄今为止所拥有的一个工作小提琴。http://jsfiddle.net/CrtFD/ http://jsfiddle.net/CrtFD/


尝试使用可丢弃的 http://jqueryui.com/demos/droppable/对于您的 toList:

EDIT:根据以下评论:

http://jsfiddle.net/abzYK/ http://jsfiddle.net/abzYK/

jQuery(document).ready(function(){
    jQuery("#fromList li").draggable('destroy').draggable({
        connectToSortable: "#toList",
        revert: "invalid",
        containment: '#equipCont',
        helper: function(e, ui) {
            return jQuery(this).clone().css('width', jQuery(this).width());
        }
    });
    jQuery("#toList").droppable('destroy').droppable({
        drop: function(e, ui) {
            var dragClone = jQuery(ui.draggable).clone();
            jQuery("#toList").append(dragClone);
        }
    });
    jQuery("ul, li").disableSelection();
});
​
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery-UI 可拖动和可排序 的相关文章

  • gmap.js 覆盖层上的 MouseOver 事件?是否可以?

    我在用着gmap js http hpneo github io gmaps examples html我正在尝试在我创建的覆盖标记上创建鼠标悬停事件 这是一个 jsFiddle gt http jsfiddle net LXv87 htt
  • 检测 html 元素内的用户选择

    如何检测用户选择 用鼠标突出显示 是否在某个元素内 某个元素的子元素 Example div sdfsdf div some span content span div sdfsd div 伪代码 if window getSelectio
  • 将 div 移动到 dom 中的其他位置

    以下代码被动态插入到 DOM 中 但是 我想将 div example 从原来的位置移动并将其添加到 wrapper 前面 我如何使用 jQuery 来实现这一目标 div div div div div div div div I tri
  • Bootstrap轮播不滑动

    我一直在尝试使用 Bootstrap Carousel 并在一定程度上取得了成功 我也可以单击并更改图像 但我有一个问题 只是不滑动而已 我哪里做错了 html div class carousel slide ol class carou
  • 移动设备和浏览器上屏幕方向不同的 javascript/jQuery 函数

    免责声明 我不是 javascript 或 jQuery 专家 这可能是一个很容易解决的问题 因为这只是我无法解决的一个小问题 我正在实现一个网站 如果浏览器处于横向模式 则该网站是水平的 如果浏览器处于纵向模式 则该网站是垂直的 CSS
  • 通过 AJAX 在 Facebook Connect 站点中加载 Facebook fb:profile-pic

    页面加载后 我发出 AJAX 请求来拉取包含代表 Facebook 用户个人资料图片的标签的 HTML 块 我将结果附加到 DOM 中的一个点 但徽标未加载 而是我看到的只是默认轮廓 下面是我如何使用 jQuery 加载 HTML 块 aj
  • 如何在Jquery数据表中选择一行

    我在用数据表 http datatables net 在我的应用程序中 每当用户单击任何行时 我想突出显示它并从所选行中选择一些值 oTableTools sRowSelect single fnRowSelected function n
  • 如何使用 jQuery 选择焦点元素

    如何选择具有当前焦点的元素 没有 focusjQuery 中的过滤器 这就是为什么我们可以使用这样的东西 input focus someFunction document activeElement 将返回当前聚焦的元素 并且比使用伪选择
  • 使用 jQuery 在元素末尾添加“更多”html?

    我一开始有一个空的 div div div 我知道如何使用 jQuery 第一次将 html 添加到我的空 div 中 mydiv html my html 但我的问题是我不知道如何在非空 div 末尾推送更多 html div my ht
  • jQuery和PHP中如何知道返回数据是Json还是String?

    我想在客户端 jQuery 检查 PHP 函数返回的数据是否是 Json 对象或 String 来分配不同的函数 如果 json 的格式不正确 jQuery 的 parseJson 将生成异常 您可以将调用包装在 try catch 块中
  • 如何使用 jQuery 将各种元素包装在 div 标签中?

    我有一个 html 结构 如下所示 h5 Title h5 p Content p ul li Item li li Item li ul p Content p h5 Title h5 p Content p ul li Item li
  • asp.net usercontrol 中的 jquery UI 模态对话框:模态叠加仅在 UserControl 中的 Div 上

    我有一个包含 jQuery UI 对话框控件的 asp net 用户控件 一切都按预期工作 除了灰色透明覆盖层 使表单模式化 仅出现在触发对话框的表单下方的隐藏 div 上 是否可以将此覆盖定位到父 div 或者这不是正确的解决方案 我尝试
  • 等待动态加载脚本

    在我的页面正文中 我需要插入以下代码作为 AJAX 调用的结果 p Loading jQuery p p Using jQuery p 我不能使用 load 由于文档已经加载 因此该事件不会触发 这安全吗 如果没有 我如何确保在执行自定义生
  • jQuery 自动完成 - xml 跨站点请求

    我的自动完成功能的 XML 提要位于另一台服务器上 是否有客户端 javascript 方法来获取此 XML 文档 我知道我可以使用 php jsp 等创建代理 但我需要在所有客户端完成此操作 这就是我现在调用该文件的方式 该文件仅在同一域
  • 使用 jQuery UI 图标

    jQuery UI 在精灵图像中提供了方便的图标 看到主题滚轮 http jqueryui com themeroller 我有一个input我想要时钟图标的元素 带有类 ui icon clock 作为背景图像 怎样才能有一个背景图标in
  • 如何在 joomla 模块中通过 javascript 发送输入文件类型

    我想将带有 javascript 的文件发送到 php 文件 我的 php 文件中有这个表单
  • 如何使用ckeditore通过ajax发送数据?

    我在 django 中有一个表格 这是 撰写邮件 形式 我将此表单从视图发送到我的模板 然后应用 ckeditor 来更改正文样式 我希望通过 ajax 发布此表单 当使用 ckeditor 时 body 字段的值不会随 request P
  • 如何使用JQuery调用SWAL中成功的函数?

    第二个功能不起作用 它没有收到从第一个函数传递的 id 这是我的 JQuery 代码 swal title Are you sure text You will not be able to recover this record type
  • 解析 PHP 响应:未捕获的语法错误:意外的标记 <

    我正在使用 AJAX 来调用 PHP 脚本 我唯一需要从响应中解析的是脚本生成的随机 ID 问题是 PHP 脚本会引发许多错误 这些错误实际上很好 不会妨碍程序功能 唯一的问题是当我跑步时 parseJSON response I get
  • 如何防止IE11弹出(您确定要离开此页面)

    我正在处理一个页面 除了一个下拉菜单可供选择外 我无需输入任何内容 但在 IE11 中 当我尝试转到下一页时 它会弹出该消息 我想阻止这种弹出的发生 所以我只是想知道 IE11 中弹出窗口的默认行为是什么 因为它不会出现在 Chrome 或

随机推荐

  • libgdx 绘制汉字

    我喜欢在我的应用程序中打印中文文本 1 当我尝试这个时 屏幕将是空的 控制台没有错误 创建方法 FreeTypeFontGenerator gen new FreeTypeFontGenerator Gdx files internal f
  • Golang编写的UDP客户端无法接收来自服务器的消息

    我写了一个Java客户端 它向广播地址发送消息 我还编写了一个Java服务器 它接受所有发送的消息并将消息发送回客户端 现在我想尝试在 Go 中做同样的事情 只是为了获得一些经验 服务器工作正常 正在接收消息并对 Java 客户端做出响应
  • 删除数组中的所有值,同时保持键不变

    我真的必须这样做才能重置阵列吗 foreach array as i gt value unset array i EDIT 这个更有意义 因为前一个相当于 array array foreach array as i gt value a
  • ARC 并释放方法中创建的对象

    我偶然发现了一个在其他地方找不到答案的问题 当我调用一个返回指向稍后使用的对象的指针并最终设置为 nil 的方法时 它仍然分配在内存中 根据 Instruments 我正在使用 XCode 4 6 3 和 iOS 6 1 ARC 已打开 这
  • OpenCv中如何将Mat的一行复制到另一个Mat的列?

    我有两个垫子 A size 1 640 B size 640 480 我想将 A 复制到 B 的第一列 所以我使用A copyTo B col 0 但是这失败了 怎么做 你走在正确的轨道上 Mat col是要使用的匹配工具 但要注意 简单地
  • appjs - 编译成单个可执行文件?

    我花了整晚的时间尝试不同的工具来通过 html5 构建跨平台桌面应用程序 到目前为止 appjs 似乎很完美 我只玩过基于 Windows 可执行文件的演示项目 但我想知道是否有任何指南或教程介绍如何将项目转换为跨平台可执行文件 单个文件
  • 将小端文件转换为大端文件

    如何将小端二进制文件转换为大端二进制文件 我有一个用 C 编写的二进制文件 我正在使用 Java 中的 DataInputStream 读取这个文件 该文件以大端格式读取 我还查看了 ByteBuffer 类 但不知道如何使用它来获得我想要
  • 带有 Eclipse 和 WTP 插件的 Maven webapp 在 Tomcat 中以奇怪的方式部署文件

    我将 Eclipse J2EE 3 5 与 Maven 和 tomcat 结合使用 为了使用 WTP 部署我的 Maven Web 应用程序 我添加了动态 Web 模块方面并更改了项目的 org eclipse wst common com
  • 具有均匀大小内核的图像卷积

    我想执行简单的 2D 图像卷积 但我的内核大小均匀 我应该为我的内核中心选择哪些指数 我尝试在谷歌上搜索答案并查看现有代码 人们通常将其内核居中 这样在新的 0 之前就会多一个样本 因此 如果我们有一个 4x4 内核 则居中索引应该是 2
  • Android 自动翻译工具 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 你知道有没有free自动本地化工具目前已退出市场 这将是从我的 android 项目翻译我的 XML
  • 如何使用 laravel 在 DOMPDF 中显示印地语字体?

    这是larval中的pdfblade文件 它给 在pdf文件中标记 section css
  • Django 查询超过 5 小时的对象的日期时间

    我正在尝试为 5 小时以上的小部件编写 Django 查询 但我有点迷失了 小部件模型有一个DateTimeField其中填充了小部件的创建时间 If Widget是模型的名称 它有一个名为的 DateTimeField 属性created
  • 如何区分 UIButton 回调操作的触发事件

    在为 UIButton 定义回调时 我列出了同一操作的多个事件 在目标中我希望能够区分触发回调的事件 button addTarget self action selector callback forControlEvents UICon
  • Android:从 SD 卡加载位图时出现“java-lang-outofmemoryerror-bitmap-size-exceeds-vm-budget-android”?

    在我的应用程序中 我必须使用 500x500 像素的小图像显示大约 10000 x 5000 的图像 即通过平铺图像 为了将所有图像平铺为一张 我首先从 SD 卡收集所有位图 以便在画布上绘制 但是当我使用外部存储加载图像时BitmapFa
  • Jquery:TableSorter-特定格式的日期不起作用

    我在用表格分类器 http tablesorter com docs 对表格进行排序的插件 第四列是日期字段 格式为 gt 2013 年 1 月 30 日 gt 2013 年 2 月 1 日 当我尝试对格式进行排序时 它给出了错误的排序 我
  • 在C#中执行Quser windows命令;将结果返回到字符串

    我试图通过 C 执行 Quser windows 命令来返回谁登录到服务器的详细信息 但无法让它工作 我尝试过使用一些指南 但我还没有看到任何适合这种情况的指南 此时命令返回以下内容 Microsoft Windows 版本 6 1 760
  • 42、42.0、“42.0”、“42”之间有什么区别吗

    在使用 Smart Match 测试我的 Perl 代码的过程中 我遇到了这个问题 42 42 0 42 0 42 之间有什么区别吗 var1 42 var2 42 0 a var1 var2 我正进入 状态 a为 0 意思是 var1 a
  • 替换 LinearLayout 权重机制

    背景 出于性能考虑 Google 建议避免使用嵌套加权线性布局 使用嵌套加权线性布局的读 写和维护都很糟糕 仍然没有好的替代方案来放置可用大小的 的视图 唯一的解决方案是权重和使用 OpenGL 甚至没有像 WPF Silverlight
  • 使用复制构造函数后双重释放子对象

    我无法弄清楚为什么 看起来 一个对象被破坏了两次 如果我创建一个类 B 的对象 其中包含另一个类 A 的对象 并且我复制该对象 复制的对象被破坏两次 虽然看起来是这样的 我无法弄清楚这个输出 我创建了以下 最小 示例 这似乎触发了我的问题
  • jQuery-UI 可拖动和可排序

    所以我一直在研究这个例子 http jqueryui com demos draggable sortable http jqueryui com demos draggable sortable我已经在我的产品上实现了这一点 然而我想做两