跨多个容器或父级的 jQuery UI 可排序 div

2024-01-08

我有一个对象列表,它被分成两个容器,我想通过 jQuery 对其进行排序,但我不知道如何使一个对象能够添加到其他容器列表中,反之亦然。因此,我希望能够将一个对象从一个容器拖到另一个容器中,并让代码将其视为一个列表。

下面是我的代码:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.22.custom.min.js"</script>
<link type="text/css" href="jquery-ui/css/smoothness/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$("#nowplaying_list, #nowplaying_history").sortable().disableSelection();
});
</script>
</head>
<body>
<div id="left_content" class="ui-droppable">
<div id="nowplaying_container" style="display:block;">
    <div id="nowplaying_wrapper">
        <div id="nowplaying_history" class="ui-sortable">
            <div class="object_container ui-draggable" >OBJECT 1</div>
            <div class="object_container ui-draggable" >OBJECT 2</div>
            <div class="object_container ui-draggable" >OBJECT 3</div>
        </div>
        <div id="nowplaying_list" class="ui-sortable">
            <div class="object_container ui-draggable" >OBJECT 4</div>
            <div class="object_container ui-draggable" >OBJECT 5</div>
            <div class="object_container ui-draggable" >OBJECT 6</div>
        </div>
    </div>
</div>
</div>
</body>
</html>

看看可排序的 Portlet 示例 http://jqueryui.com/sortable/#portlets,它似乎具有您想要的行为。

关键是connectWith选项,一旦将公共类分配给两个容器,就可以使用该选项:

$(".now-playing-block").sortable({
    connectWith: '.now-playing-block'
});

(我遗漏了链子.disableSelection()请要求清楚。)

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

跨多个容器或父级的 jQuery UI 可排序 div 的相关文章

  • 如何获取输入元素上的 TAB 键事件?

    我尝试在输入字段中按下返回键时触发按钮 这有效 但是 如果我按 Tab 键 则不会触发任何内容 因为未捕获 TAB 键事件 小提琴示例 http jsfiddle net a08t4o7r 例如 这是我的 JQ 代码片段 input nam
  • AngularJS - 在等待数据/数据计算时加载图标

    我有一个简单的 Angular http get app factory countriesService function http return getCountryData function done http get resourc
  • Bug 组合:jQuery 1.4、ajax/json、Firebug Lite 和 IE 8

    我刚刚得出结论 无论我如何尝试 jQuery 的 ajax 调用都无法在 IE 8 中处理 JSON 数据 我发现我可以使用 jQuery 1 3 2 库 这解决了问题 但 1 4 根本无法处理 JSON ajax 请求 即使返回的 JSO
  • Jquery 子元素发生变化

    我正在尝试使用 jquery 在子元素 在本例中为 select 更改时触发事件 这是我的 HTML div class row addForm div class col lg 2 col md 2 col sm 3 col xs 6 d
  • 在选择 tr 来覆盖父 div 上的第 n 个子类时,如何使用 jquery addClass ?

    我用它来选择一个 tr 当单击它来更改 tr 的颜色时 tr click function this addClass selected siblings removeClass selected 参见小提琴http jsfiddle ne
  • 如何更改数据表中标题单元格的内容?

    我正在使用数据表 http datatables net plugin 在我的可排序列上 我想用按钮替换列文本 但是这样做 oSettings aoColumns i nTh text 我可以检索相应列的文本 但是 oSettings ao
  • jQuery / CSS3 动画阴影效果

    所以这个问题可能会被否决 但我认为有人可能会提供帮助 我正在寻找的效果是蓝色块像气球一样上下盘旋 当块上 下移动时 阴影在其下方不断增大和缩小 关于如何编程的任何想法 或者有人知道可以完成的教程 插件吗 你可以使用 jQuery 来完成 或
  • PHP、jQuery Ajax 和 json 跨域返回

    我的 php 编码页面位于一台返回 json 结果的服务器上 php 文件名为 getInfoData php 返回如下 echo json encode v 不 我可以使用 getJSON 读取 json 并在同一服务器上运行它 但我需要
  • jQuery float bar 数字:数字定位

    我在用着jquery flot barnumbers js https github com joetsoi flot barnumbers 的插件jQuery 的 Javascript 绘图 图表 库 https github com f
  • Chrome 浏览器上的自动文件下载限制为 10 个文件

    我有一个网页 我们根据用户对页面项目的选择生成 PDF 这会导致回发 它是一个 ASP NET WebForms 页面 从而在服务器端创建 PDF 一个 a class documentDownload 然后将标签添加到每个项目的页面 当页
  • 将鼠标悬停在图像上以显示按钮,并且将鼠标悬停在实际按钮上时不会触发

    我试图让按钮在悬停在图像上时出现 以下作品 jQuery show image mouseenter function jQuery the buttons animate opacity 1 1500 mouseout function
  • 按下了哪个提交按钮?

    在这个jsfiddle中 http jsfiddle net littlesandra88 eGRRb http jsfiddle net littlesandra88 eGRRb 我是否提交了自动生成的按钮 每个表行都有一个唯一的 ID
  • 记录jQuery中调用的方法和参数

    假设我有 jQuery 并且加载了几个插件 我运行一些这样的代码 someSelector someMethod someParam someOtherParam someOtherSelector someOtherMethod anot
  • 区分单击与 mousedown/mouseup

    我已经阅读了有关这种情况的 stackoverflow 上的几个答案 但没有一个解决方案有效 我尝试根据用户是否单击某个元素或使用 jQuery 将鼠标按住该元素来执行不同的操作 有可能做到这一点吗 onMouseDown 将在按下左侧或右
  • Blueimp jQuery 文件上传,传递额外的表单数据

    我可以使用一些帮助 我已经设法使 blueimp jQuery 文件上传为我工作 但我仍然绝对是一个新手 我对 jQuery 等知之甚少 所以请尝试将其清晰明了地提供给我尽可能简单 我会尝试具体一点 好的 我想实现的是人们可以上传照片 并为
  • 是否可以使用 Javascript 读取 PHP 会话?

    我正在使用 cakePHP 1 26 在控制器中 我得到了一个包含以下代码行的函数 this gt Session gt write testing user this gt Session gt read testing 现在系统编写了一
  • 获取 2 个日期之间的月份名称

    我有两个约会from and to 我想获取这两个日期之间的所有月份名称 以下是我的代码 var monthNames January February March April May June July August September
  • jQuery UI 1.8.17 和 selectmenu

    这个问题的答案可能会让我 doh 时刻 但是我在哪里可以找到一个可与较晚 ish jquery ui 版本一起使用的有效 selectmenu 插件 我从所有这些地方尝试过 但似乎都不起作用 http www filamentgroup c
  • Javascript / jQuery - 转换特殊 html 字符

    我有一个pre元素中包含一些 html 代码 该代码中有特殊字符 例如 lt 所以它不会破坏页面 然后我有一个 javascript 函数 它获取此 pre 元素的内容 突出显示它 使用 codemirror 并用突出显示的文本替换元素内容
  • 我无法使用 jQuery 和 abort() 函数停止 ajax 请求

    我的 jQuery 如下 var x ajax dataType jsonp url https ajax googleapis com ajax services search images q google v 1 0 success

随机推荐