jQueryUI 可拖动 + 可排序错误(无法读取未定义的属性“选项”)

2024-04-25

我的问题似乎类似于这个问题:

从可排序列表拖动到拖放插件 https://stackoverflow.com/questions/17928139/dragging-from-a-sortable-list-to-a-drag-and-drop-plugin

但由于没有给出答案,我想知道是否有人可以/能够和我一起解决这个问题。我遇到的问题是我创建了一个可拖动的 div 并将其附加到可排序的 div 中。当我像这样指定任何参数时:

$(el).sortable({ ... arguments ... }); 

当元素被删除时,它会导致错误(见下文),当留空时,它会奇怪地工作正常并且没有问题。该错误还阻止可拖动元素触发任何功能。

Uncaught TypeError: Cannot read property 'options' of undefined 
jquery-ui-1.10.3.custom.js:2204

$.ui.plugin.add.stop                         jquery-ui-1.10.3.custom.js:2204
$.extend.plugin.call                         jquery-ui-1.10.3.custom.js:284
$.widget._trigger                            jquery-ui-1.10.3.custom.js:2017
(anonymous function)                         jquery-ui-1.10.3.custom.js:401
$.widget._mouseStop                          jquery-ui-1.10.3.custom.js:1702
(anonymous function)                         jquery-ui-1.10.3.custom.js:401
$.widget._mouseUp                            jquery-ui-1.10.3.custom.js:957
(anonymous function)                         jquery-ui-1.10.3.custom.js:401
$.widget._mouseUp                            jquery-ui-1.10.3.custom.js:1721
(anonymous function)                         jquery-ui-1.10.3.custom.js:401
$.widget._mouseDown._mouseUpDelegate         jquery-ui-1.10.3.custom.js:913
jQuery.event.dispatch                        jquery-1.10.2.js:5095
jQuery.event.add.elemData.handle             jquery-1.10.2.js:4766

这是出错的代码:

$.ui.plugin.add("draggable", "cursor", {
    start: function() {
        var t = $("body"), o = $(this).data("ui-draggable").options;
        if (t.css("cursor")) {
            o._cursor = t.css("cursor");
        }
        t.css("cursor", o.cursor);
    },
    stop: function() {
        var o = $(this).data("ui-draggable").options;
        if (o._cursor) {
            $("body").css("cursor", o._cursor);
        }
    }
});

var o = $(this).data("ui-draggable").options; The $(this).data()仅包含:对象 {id: "c17"}

示例代码:

$('.draggable').draggable({
  connectToSortable: '.sortable',
  drop: function(){
    console.log('Element dropped');
  }
});

$('.sortable').sortable({
  update: function(){
     console.log('sortable updated'); 
  }
});

JSBin 示例:http://jsbin.com/eHUKuCoL/9/edit?html,js,输出 http://jsbin.com/eHUKuCoL/9/edit?html,js,output希望有人能够告诉我问题是什么以及问题的解决方法是什么。


根据文档,Jquery UI 可拖动文档 http://api.jqueryui.com/draggable/#option-connectToSortable,您需要将辅助参数设置为“clone”,以便 connectWithSortable 功能能够完美运行。

一旦我这样做了,它就停止抛出错误。

更新了 JSBin http://jsbin.com/eHUKuCoL/10/

另请注意,draggable 在其文档中没有“drop”方法,因此如果您想要的话,您可能必须包含 droppable 插件。

最后,如果您必须使用克隆作为辅助方法,您可能需要添加一些 css 以使其运行更流畅。

Cheers.

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

jQueryUI 可拖动 + 可排序错误(无法读取未定义的属性“选项”) 的相关文章

  • 是否可以实现异步跨域文件上传?

    有可能的 参见下文 首先我用这张图来解释一下异步文件上传可以实现 对不起 我已经关闭了我的一个域 该图像现在消失了 不过 这确实是一个很好的图像 这是在我发现 Stack Overflow 可以通过 Imgur 上传图像之前 正如您所看到的
  • 如何使事件 DOM 侦听器适应 Google Maps JavaScript API v3.35

    我曾经使用以下代码来捕获用户的 Enter 键事件 如果用户没有选择其中任何一个 即没有标记为 pac 的 pac item 则自动从自动完成结果 pac items 中选择第一个结果 项目选择 var input document get
  • Google Analytics 是否具有针对长时间运行的网络应用程序的“心跳”功能?

    我正在制作一个专注于观看嵌入内容的网络应用程序 我希望应用程序客户端向 GA Google Analytics 发送 心跳 类型的信号以保持会话继续进行 现在看来 如果访问者观看视频 5 10 分钟 GA 就会假设他已经离开页面 并将用户的
  • JavaScript 闭包与匿名函数

    我和我的一个朋友目前正在讨论 JS 中什么是闭包 什么不是 我们只是想确保我们真正正确地理解它 我们以这个例子为例 我们有一个计数循环 想要在控制台上延迟打印计数器变量 因此我们使用setTimeout and closures捕获计数器变
  • 使用 Javascript 从 URL 字符串获取端口 [重复]

    这个问题在这里已经有答案了 我想要一个 javascript 函数 它将获取一个 url 作为参数 并返回该 URL 的端口 如下所示 如果有一个http or https 端口 80 443 它不会显示在 url 结构中 但我还是希望它们
  • AngularJS:如何在 AngularJS 中使用或注入第三方库

    我是 Angular 和 Deployd 的新手 想知道如何一起使用它们 我发现 Deployd 网站中的示例很好 但它只消耗其余 API 数据 我想了解如何将 Deployd 作为 AngularJS 中的服务 例如 通过部署中可用的收集
  • 禁用 Chrome 的文本输入撤消/重做 (CTRL+Z / CTRL+Y)

    i m currently developing a web application and i encounter a problem As you might know or not chrome has a feature that
  • 如何从 OnChange 事件捕获文本框的值

    在我的 C MVC 应用程序中 我有一系列这样生成的文本框 foreach object item in items Html TextBox 渲染的结果是一系列看起来像这样的文本框
  • D3js 多折线图 mouseOver

    我正在努力适应this http bl ocks org mbostock 3902569D3js 折线图示例 将鼠标悬停在我的多线图表上的使用情况 看起来d3 mouse this 0 on the mousemove函数生成以下错误 无
  • 客户端上传并读取文件,角度为2

    我需要用户的日志文件 以便我可以读取和分析这些文件 例如某种放置区域 用户放置一个文件 然后我可以用javascript读取它 我使用 Angular2 rc5 我有 node js 在后台运行 但我不需要那里的数据 我只需要在客户端 是否
  • 弹出窗口显示来自 php 和 javascript 的结果

    我正在尝试实现 javascript 来显示 php 的结果 基本上 我有一个登录页面 对于登录失败 我希望结果显示在弹出窗口中 而不是仅仅用 php 回显它们 我尝试实现警报框 但看起来我错过了一些东西 成功登录将被重定向到logged
  • 使用 var 与 let/const 进行块级变量重新声明

    Part 1 给出这个例子 var number 10 var number 42 console log number 42 为什么第 4 行不抛出Uncaught SyntaxError Identifier number has al
  • 在 Codeigniter 中使用/嵌入 Ember js

    我即将开始开发一个 Web 应用程序 使用 Ember js 作为前端技术 使用 Codeigniter 作为后端 我遇到的问题是如何在 codeigniter 中嵌入或使用 ember js 可以通过 Web 服务从 codeignite
  • 避免使用 Grunt cssmin 任务来删除重复条目

    在我的 Gruntfile 中 我使用 cssmin grunt contrib cssmin 任务 就像是 cssmin css src dist styles css dest dist styles min css 问题是 style
  • Spring Boot MultipartFile上传getOriginalFileName根据浏览器不同而不同

    我使用的是 spring boot 1 5 7 RELEASE 版本 我使用以下方法上传文件 Autowired private MyService mySerice RequestMapping value uploadFile meth
  • 确定$.ajax错误是否是超时

    我正在利用魔法jQuery ajax settings 不过 我想知道是否有人经常使用超时设置 我知道它基本上是为了规定请求的本地时间 但是如果达到超时 它会触发任何事情吗 或者它只是停止监听响应 阅读 jQuery 站点 我可以看到没有传
  • JSON 和 AJAX 与 jQuery 有什么区别?

    我听说 JSON 会序列化所有数据 这可以防止我在跨浏览器支持等方面遇到客户端问题 我一直在使用 AJAX 和 jQuery 这看起来很简单 但我不确定其中的区别 我读过我也可以使用它来获取数据 ajax url url dataType
  • 无法定义 set 和 get 方法

    尝试使用访问器定义属性时出现错误 这是我的代码 var person Object defineProperty person birthYear value 1997 writable true enumerable true confi
  • 关闭网站的 IE 8 兼容模式

    我的公司使用IE8作为默认浏览器 并且默认为所有内联网站点设置兼容模式 我正在构建一个在关闭兼容模式时可以工作的 Intranet 站点 我正在使用 Reset css 和几个开源 JavaScript 程序 例如数据表 我想做的是强制关闭
  • 如何从 Firebase 实时数据库中删除具有 UID 的用户?

    数据库结构如下所示 LGw89Lx5CA9mOe1fSRQ uid FzobH6xDhHhtjbfqxlHR5nTobL62 image https pbs twimg com profile images 8950378298 locat

随机推荐

  • ModelClientValidationRule 冲突

    我已将 vs 2011 开发人员预览版与 vs 2010 并排安装 现在 当我在 vs 2010 中运行我的 asp net mvc 3 项目时 我在使用 ModelClientValidationRule 的项目中收到以下错误 Syste
  • 在线代码美化器和格式化程序[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 在一个函数中返回两个变量[重复]

    这个问题在这里已经有答案了 考虑以下代码 demo http jsfiddle net m59Fg function test var h Hello var w World return h w var test test alert t
  • Mono 与 CompletableFuture

    CompletableFuture在单独的线程上执行任务 使用线程池 并提供回调函数 假设我有一个 API 调用CompletableFuture 这是 API 调用阻塞吗 线程会被阻塞直到它没有从 API 得到响应吗 我知道主线程 tom
  • 这是从片段中获取字符串资源的正确方法吗?

    在片段中读取字符串资源时 哪种方法通常更好 更安全 我在这里读到getResources getString 直接地 public class SomeFragment extends Fragment public static Some
  • C# - 从客户端检查 TCP/IP 套接字状态

    我想为我的 TCP IP 客户端类提供 CheckConnection 函数 以便我可以检查是否发生了错误 我自己的客户端断开连接 服务器断开连接 服务器卡住等 我有类似的东西 bool isConnectionActive false i
  • 无法在网络视图中滚动图像

    我为 Android 和 iOS 开发了一个 webview 应用程序 我注意到我无法滚动 Android 应用程序中的特定 html 元素 而它可以在 iOS 上运行 这是website https www blizz z de flex
  • 一个 pom 中的多个工件 ID

    有一个maven项目 jar 但现在需要将其分成两个工件 我想要两个像下面这样的 Maven 工件
  • 确保隐式定义始终具有较高/较低优先级的一般方法

    我有一个有点复杂的类型类情况 格式如下 sealed trait TypeClass S lt MyType type Out lt MyType sealed trait LowPriorityTypeClass Case OtherTy
  • Glib — 对 glib 中任何内容的未定义引用? [复制]

    这个问题在这里已经有答案了 我的 S 程序有问题 我需要用这个命令编译它 gcc I usr include glib 2 0 I usr lib x86 64 linux gnu glib 2 0 include lglib 2 0 D
  • ggplot 上的混合比例

    我想制作一个图 最好使用 ggplot2 其中 x 轴具有不同的缩放比例 更准确地说 我希望我的刻度从大约 0 001 到 0 05 是对数的 从 0 05 到 1 0 是非对数的 我当前的绘图代码是 ggplot DF aes x DF
  • 如何*真正*编写 UML 基数?

    我想一劳永逸地知道如何编写 UML 基数 因为我经常不得不争论它们 所以非常欢迎证明和来源 如果我想解释一下a Mother可以有几个Children but a Child有且仅有一个Mother 我应该写 Mother 1 Child
  • 如何在OpenCart 2.3.0.2中设置全局变量?

    当我想在模板中设置全局变量时 tpl文件 我只是使用global在 opencart 2 2 或更早版本中 例如 but 它在最新的 OpenCart 2 3 0 2 中不起作用 因为预定义的global config在控制器中相当不方便
  • 如何使用新的 Google Vision API 生成条形码并将其转换为位图?

    如何使用新的 Google Vision API 生成条形码并将其转换为位图 Barcode barcode new Barcode Barcode Email email new Barcode Email email address e
  • 字符串中最长的单词

    如何获得字符串中最长的单词 Eg string Where did the big Elephant go 回来 Elephant 循环遍历字符串中的单词 跟踪迄今为止最长的单词
  • android 中软键盘上方需要上一个、下一个按钮

    我想在键盘上方显示带有 上一个 下一个 按钮的虚拟键盘 当用户单击 上一个 按钮时 光标应移动到上一个编辑文本输入字段 单击 下一个 按钮应转到视图中的下一个编辑文本字段 如果我们在Android浏览器中打开任何要求输入的页面 我们就可以看
  • 将静态对象添加到资源字典中

    我有一个在多个视图中引用的类 但我希望它们之间只共享该类的一个实例 我已经像这样实现了我的课程 using System public class Singleton private static Singleton instance pr
  • GoDaddy Linux 上的 PHP 共享尝试通过 GMAIL SMTP 发送

    我已经尝试过 StackOverflow 和其他网站上发布的每一个脚本 代码 方法 但没有运气 我在 GoDaddy 上托管 我已经设置了一个 Google App 帐户 设置了 MX 记录所需的一切 使用 GoDaddy 工具 甚至尝试从
  • 在没有未定义行为的情况下,哪些 float 值无法转换为 int [c++]?

    我刚刚从 C 14 标准中读到了这个 我的重点 4 9 浮点积分转换 conv fpint 1浮点类型的纯右值可以转换为整数类型的纯右值 转换截断 也就是说 小数部分被丢弃 如果无法截断值 则行为未定义 以目标类型表示 这让我思考 其中 如
  • jQueryUI 可拖动 + 可排序错误(无法读取未定义的属性“选项”)

    我的问题似乎类似于这个问题 从可排序列表拖动到拖放插件 https stackoverflow com questions 17928139 dragging from a sortable list to a drag and drop