- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我有以下内容:
我正在尝试对其进行设置,以便当您拖动该项目时,它只会掉落到您可以看到的 div 元素,并且不会被掩盖.
所以我用了这个js:
$(".draggable").draggable({
helper: "clone"
})
$("#bottom, .draggable").droppable({
drop: function(event, ui) {
var $this = $(this),
$dragged = $(ui.draggable);
$this.append($dragged.clone());
},
hoverClass: "dragHover"
})
但它会在两个位置放置元素,即使只有一个放置区域不可见!
我该如何解决它,以便不会发生这种情况?
fiddle :http://jsfiddle.net/maniator/Wp4LU/
重新创建页面的额外信息没有 fiddle :
HTML:
<div id="top">
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
<div class="draggable">
Lorem ipsum dolor sit amet
</div>
</div>
<div id="bottom"></div>
CSS:
.draggable {
border: 1px solid green;
background: white;
padding: 5px;
}
.dragHover{
background: blue;
}
#top {
height: 500px;
overflow-y: scroll;
}
#bottom {
height: 150px;
overflow-y: scroll;
border: red solid 4px;
}
最佳答案
尝试使用accept
函数进行设置。 The working demo.
$("#bottom, .draggable").droppable({
drop: function(event, ui) {
var $this = $(this),
$dragged = $(ui.draggable);
$this.append($dragged.clone());
},
accept: function () {
var $this = $(this), divTop= $("#top");
if ($this.is(".draggable")) {
return $this.offset().top < divTop.offset().top + divTop.height() ;
}
return true;
},
hoverClass: "dragHover"
});
关于javascript - 只掉落到可见的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12095196/
抱歉,我不知道如何正确表达标题。但我正在制作一个 Java 游戏,屏幕底部有一个桨,您可以左右移动它以避免小行星坠落。我的桨可以工作,但我不知道如何制作一颗下落的小行星。小行星目前只是一个矩形。我还希
我制作了一个 x=25 & y= 25 的正方形并附加了一个 SKPhysicsBody。我制作了一个标准平台关卡,其中有几个高的下降区域。我希望正方形“破裂”/因从高处坠落而受到损坏。我查了一下维基
我是一名初级游戏程序员,我正在学习如何使用适用于 Android 的 AndEngine。我想让一个 Sprite 从屏幕上掉下来,并在用户触摸时向上跳。关于如何做到这一点的任何想法?如果这样更容易,
我刚刚开始在我的 Ogre 项目中实现 bullet。我按照此处的安装说明进行操作:http://www.ogre3d.org/tikiwiki/OgreBullet+Tutorial+1 剩下的教程
将我的项目升级到 iOS7 后 当我执行 BACK 按钮并且 UINavigationController 返回上一页时,屏幕顶部的 ImageView 会向下移动。 我使用 IB 来做我的布局。这些
我有两个内联 div,其中一个内联 div 有两个彼此下方的 div。 JSFiddle 点击#notLoginStudentBtn 我在做什么我正在切换#notLoginStudentBox 但在切
我有一个移动的对象,它生成由滑动关节连接的 object2 当我按下按钮时,关节被移除,object2 在重力作用下落下 这可行,但只在 x 轴上落下而不会保持其 y 轴速度。 如何让 Object2
如何从购物车中删除商品? 自然地,您希望能够将项目拖放回去。 $(function() { $( "#catalog" ).accordion(); $( "#cata
Swift 标准库中是否有作用于集合、采用谓词并返回从该集合中移除的值的函数? 目前,我必须分两步实现它: guard let idx = allAnnotations.index(where: {$
我真的需要一些关于我的游戏对象的帮助。 我正在开发一款游戏,我想要一个拾取元素来产生物理力爆炸来炸毁敌人。我做了一个简单的炸弹对象来测试这个想法。我添加了一个简单的代码,使用一个循环来收集其半径内的所
平台:iOS (Swift)Mapbox SDK版本:3.6 嗨,我有一个自定义 MGLCalloutView,当我点击 MGLAnnotationView 时,标注会按预期显示在注释上方,但如果我稍
我正在使用 WKWebView 查看自定义 HTML。 无论 HTML 内容如何,在真实设备上进行测试时,我都会在 Could not signal service com.apple.WebKi
我正在使用 WKWebView 查看自定义 HTML。 无论 HTML 内容如何,在真实设备上进行测试时,我都会在 Could not signal service com.apple.WebKi
我是一名优秀的程序员,十分优秀!