个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个页面有大量jquery UI draggables and a large number of droppable s。我想要一些自定义逻辑来确定可放置项是否接受某个可拖动项，因此我编写了一些逻辑 in the "accept" event of the droppable 。它有效，但我注意到的一件事是，当您开始拖动一个项目时，该事件会立即触发，并且当时所有可放置的项目都会触发该事件。
这看起来效率很低。我认为当你悬停时，它适合单个可放置的权利，但情况似乎并非如此。您是否有任何理由认为它是这样编码的(因为它看起来非常低效，就好像我有 100 个 droppables，即使用户只尝试拖动到一个 droppables 中，它也会触发 100 次)并且还有什么方法可以有我想要的行为。
我想将逻辑放入放置事件中，以简单地进行检查并删除可拖动项目(以模拟不接受它)，但问题是您没有获得任何漂亮的“恢复”动画，因此它看起来有点不一致(与基于接受事件时看到的内容相比)
关于如何在我移动某些东西时仍然可以插入一些自定义逻辑但不浪费周期在每个可放置的权利上触发(并且仍然获得恢复动画)，有什么想法吗？
最佳答案
我认为开销没有那么大，但如果您确实需要替代解决方案:在开始时获取可拖动元素的起始位置并将其保存在元素的 data() 中。在放置例程中进行逻辑检查。如果失败，则将元素动画回到起始位置。这将确保事件仅特定于被拖动和可放置的元素。
http://jsfiddle.net/samnunnally/sgy29/2/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>droppable demo</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#notAllowed {
width: 100px;
height: 100px;
background: #ccc;
}
#allowed {
width: 100px;
height: 100px;
background: red;
}
#droppable {
position: absolute;
left: 250px;
top: 0;
width: 125px;
height: 125px;
background: #999;
color: #fff;
padding: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="droppable" >Drop here</div>
<div id="notAllowed" >not allowed to drop</div>
<div id="allowed">allowed to drop</div>
<script>
function capturePosition(event, ui) {
ui.helper.data( 'startPosition', ui.position);
}
$( document ).ready(function() {
$("#notAllowed").draggable({
start : capturePosition
});
$("#allowed").draggable({
start : capturePosition
});
$("#droppable").droppable({
drop : function(event, ui) {
//do logic to determine if it can be dropped
if(ui.draggable.attr('id') == 'notAllowed'){
var startPosition = ui.draggable.data('startPosition');
ui.draggable
.animate({
'left':
'+='+ (startPosition.left - ui.draggable.offset().left + $('body').offset().left) + 'px' },
'slow' )
.animate({
'top':
'+='+ (startPosition.top - ui.draggable.offset().top + + $('body').offset().top) + 'px' },
'slow' );
}
}
});
}
</script>
</body>
</html>
关于jquery - 使用 jquery-ui Droppable 时，为什么当有人开始拖动可拖动对象时会立即触发接受事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20024960/
24
4
0
我正在本地编程应用程序，但是当我迁移到服务器时，使用此行出现解析错误: if(!is_array($data[array_keys($data)[0]])) 返回值: Parse error: syn
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 9 年前。 Improv
我已经开始尝试用 C++ 学习 Winsock，但我遇到了一些问题。我首先遵循 MSDN 上的 Winsock 示例(一个基本的客户端-服务器)。 http://msdn.microsoft.com/
我有一段使用 epoll 的代码，但它有问题。当我运行它时，它给出输出:服务器套接字()没问题......服务器绑定(bind)()没问题......3个4个接受:无效参数 我在 ubuntu lin
我正在寻找一种方法来接受 $_GET 变量作为文件路径，例如 - /page/test将转换为 page.php?page=test .我已经搜索过，但找不到任何可以帮助我的东西，因此我在这里问。 我
我想要一个只接受从 0 到 9 和减号的浮点数的正则表达式。 请帮忙。 最佳答案 ^[-+]?[0-9]*\.?[0-9]+$ ^ - 字符串开头 [-+]? - 0 或 1 符号指示符 [0-9]*
请问如何接受\r\n无需将其更改为 \\r\\n , 与 fgets . 我想让程序翻译 \r\n到换行符而不是将其打印为字符串。 当前代码: char buff[1024]; printf("Msg
我正在编写一个 Cocoa 应用程序，该应用程序需要在其 Dock 图标上接受已安装卷的滴落。它不是基于文档的；我打算将每个卷分派(dispatch)到 application:openFiles 中
我在 SQLite 中发现了这种意外行为。 SQLite 似乎接受 SQL 连接语法中的任意关键字。如果我不小心键入了 natural join 而不是 natural join，则会生成笛卡尔积。这
我在 Windows 窗体的同一个窗体上有一个 TreeView 和一个多行文本框。我有拖放设置，以便我可以将节点从 TreeView 拖到文本框并将文本插入文本框(这是有效的)。 我想增强这一点，以
我正在创建一棵类似于 D3 Layout Tree 的树并尝试绑定(bind)我的自定义 JSON 对象。切换树节点的代码如下。 function toggleAll(d) { if (d.c
所以，我希望能够向我的 DOB 字段发送空选项。 这是我的表单生成器: ->add('birthDate', DateType::class, array( 'widg
错误可以在这里看到:http://djaffry.selfip.com:8080/ 我希望索引页接受参数，无论是 mysite.com/search/param_here 或 mysite.com/?
我想知道标准 Scala 解析器组合器是否包含一个解析器，该解析器接受 Scala 语言本身也接受的相同标识符(如 Scala 语言规范第 1.1 节中所指定)。 StdTokenParsers 特征
我暂时使用以下行在我的 Android 手机上创建 ServerSocket: socketl = new ServerSocket(port, 0, InetAddress.getByName("1
今天早上刚刚发布了一个应用程序，我在所有可能的设备和模拟器上测试了它，但是当我从商店下载它时，应用程序在启动时崩溃。我在很多设备和iOS版本上测试过，但结果都是一样的: Incident Identi
我想要 5 个名字中最长的一个。我想我应该使用 compareTo() 方法或 length()？ 输出必须是这样的: enter 5 names : Joey Mark Catherine Zach
抱歉，我不熟悉泛型，我可以创建一个如下所示的泛型类: public class InfoField { } 上面的类可以接受如下值: , User> 但是我可以有接受 map 对象作为值的类吗？
我想让一个单元格等于它上面的单元格。 当我写作时 =address(row()-1;column()) 它只是写入上面单元格的名称(例如，对于 B2，它写入 $B$1) 是否有一个函数可以输入地址并放
我正在使用Asm访问java字节码来获取方法信息。看来ClassReader类的accept方法是异步调用的，所以不可能立即获取方法信息。我该怎么办？ 最佳答案 实际上，accept 方法是从您自己的
我是一名优秀的程序员,十分优秀！