【问题标题】:Jquery drag revert on drop to specific divJquery 拖放恢复到特定的 div
【发布时间】:2012-05-31 23:30:03
【问题描述】:

我目前有一个使用 Jquery UI 拖放的布局。我在 Jquery 网站上看到了用于还原的代码,但我不确定如何检测是否将 div 拖放到某个 div 和如果是的话就恢复它。

基本上我有 2 个 div,我只希望拖放能够放入其中一个,如果它没有放入正确的 div 中,那么它会被还原:)

脚本:

 <script type="text/javascript">
function shift(parent){
$("#"+parent).draggable({ handle: ".item", accept: "#floor", containment: "#floor", scroll: false, stack:"#floor div" });
}
</script>

可拖动:

<div id="drag" class="ui-widget-content" onmousedown="shift('example')"> </div>

DIV

<div id="container">
    <div id="floor"> </div>
    <div id="other"> </div>
</div>

可拖动对象在容器内,但我只希望将它放在地板内而不是其他地方。

任何帮助将不胜感激

提前谢谢大家!

【问题讨论】:

  • 你能发布一些你的代码吗?
  • 抱歉,是的,已为您添加 :)
  • 嘿,安德鲁,我也许可以帮助您:那么您正在尝试的行为是什么?即
    flloor &amp; other shoule 不可拖动,drag div 的相关性是什么,对不起,如果我听起来很厚,:)
  • 拖动的相关性是因为人们能够拖动其他 div,但我想限制他们只能将拖动的内容拖放到“地板”而不是“其他”。如果他们拖到其他地方,那么它将被还原,否则如果他们拖到地板上,它将成功下降:)
  • @Andrew Okies 等一下,我会尽快给你写一个演示;希望得到你:P

标签: javascript jquery jquery-ui drag-and-drop


【解决方案1】:

Hiya Andrew 工作演示 http://jsfiddle.net/BYsnc/

希望这会有所帮助

好读:http://docs.jquery.com/UI/Draggable

行为:当用户将drag me 拖到floor 时,它会允许,否则如果您将它拖到other,它不会 B-)

说明

JQuery 代码

// 将 Floor Div 设为可放置

$('#floor').droppable({
    tolerance: 'fit'
});

// 现在将拖动 div 设为可拖动

$('#drag').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    }
});

// 最后告诉拖拽他们的 Droppable 属性

$('#drag').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
        ui.draggable.draggable('option','revert',true);
    }
});
​

【讨论】:

  • 非常感谢,你帮了我很大的忙,这正是我想要的:D
  • 我要成功drop回调函数
猜你喜欢
相关资源
最近更新 更多
热门标签