jQuery UI:将可排序从手风琴内部拖到外部 [英] jQuery UI: Drag Sortable from within Accordion to Outside
问题描述
我有两个相互连接的可排序列表.一个只是在页面上,另一个在手风琴中.(我使用手风琴作为另一个列表的容器)
我的目标是让用户可以打开手风琴并将项目从列表中拉出到页面上.
它有效 - 除了占位符在离开手风琴时消失.我试过 helper: 'clone' 并增加 zIndex.
这是代码的简化版本:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){$( "#inside" ).手风琴({可折叠:真实,填充空间:真,活动:假});$("#ulOutsideList, #ulInsideList").sortable({不透明度:0.7,回复: 100,滚动:真实,帮手:'克隆',zIndex: 50000,connectWith: ".connectedSortable",});});<div id="外面"><!-- 1. 选择商店--><ul id="ulOutsideList" class="connectedSortable"><li>在1</li>之外<li>2</li>外<li>外3</li>
<!-- end 1. 选择商店--><div style="clear:both"></div><div id="里面"><h3>容器</h3><ul id="ulInsideList" class="connectedSortable"><li>在1</li>里面<li>在2</li>里面<li>在3</li>里面
在可排序调用中,您希望使用以下选项:
helper: "clone", appendTo: "body",//或者任何你想要帮助克隆附加到的元素
这有两件事.首先,它复制被拖动的元素(helper 选项),然后将该 helper 附加到指定的元素(appendTo 选项).
此处有类似问题:jQuery-Ui:无法将对象拖出手风琴在这里:jquery sortable 不能拖到手风琴之外
I have two sortable lists that are connected. One is simply on the page, the other is within an accordion. (I'm using the accordion as a container for the other list)
My goal is such that a user can open the accordion and pull items out of that list and onto the page.
It works - except the placeholder disappears upon leaving the accordion. I've tried helper: 'clone' and increasing the zIndex.
Here is a simplified version of the code:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$( "#inside" ).accordion({
collapsible: true,
fillSpace: true,
active: false
});
$("#ulOutsideList, #ulInsideList").sortable({
opacity: 0.7,
revert: 100,
scroll: true,
helper: 'clone',
zIndex: 50000,
connectWith: ".connectedSortable",
});
});
</script>
<div id="outside"> <!-- 1. Pick a Store -->
<ul id="ulOutsideList" class="connectedSortable">
<li>outside 1</li>
<li>outside 2</li>
<li>outside 3</li>
</ul>
</div> <!-- end 1. Pick a Store -->
<div style="clear:both"></div>
<div id="inside">
<h3>container</h3>
<ul id="ulInsideList" class="connectedSortable">
<li>inside 1</li>
<li>inside 2</li>
<li>inside 3</li>
</ul>
</div>
In your sortable call you want to use the following options:
helper: "clone", appendTo: "body", // or whatever element you want the helper clone to be attached to
This does two things. First it makes a copy of the element being dragged (helper option), second it attaches that helper to the specified element (appendTo option).
Similar questions here: jQuery-Ui: Cannot drag object outside of an accordion and here: jquery sortable cannot be dragged outside of accordion
这篇关于jQuery UI:将可排序从手风琴内部拖到外部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!