jquery sortable 不能拖到手风琴之外 [英] jquery sortable cannot be dragged outside of accordion

查看：26
本文介绍了jquery sortable 不能拖到手风琴之外的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有 2 个连接的可排序列表.一个在手风琴里面.当我尝试从手风琴中的 sortable 拖动项目时，一旦我离开手风琴，助手就会消失.我可以拖放到其他连接的可排序对象之一，该项目将显示，但在我拖动时它不显示.如果我向下拖动项目，手风琴也会向下滚动.

我可以拖动 &从另一个列表中的任何一个我需要的地方删除项目，它工作正常.将项目从手风琴内部拖到外部时，如何使它们不消失?

我已经尝试过遏制选项，但似乎没有效果.

这里的代码暴露了我从这些例子中得到的问题:http://jqueryui.com/demos/sortable/#connect-lists

我希望能够将项目从手风琴拖到可排序列表中.我实际上可以将它们放入列表中，但是当我将它们拖出手风琴时它们消失了.

<头><title>Accordion Sortable 故障测试</title><link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet"/><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script><script type="text/javascript">$(函数(){$(".sortable").sortable({connectWith: ".sortable"});$("#accordion").accordion({ header: "h3" });});<身体><h2>可排序</h2><ul class="sortable"><li>第1行</li><li>第2行</li><h2>手风琴</h2><div id="手风琴"><div><h3><a href="#">第一</a></h3><ul class="sortable"><li>Lorem</li><li>ipsum</li><li>dolor</li>

<div><h3><a href="#">第二</a></h3><div>Phasellus mattis tincidunt nibh.</div>

<div><h3><a href="#">第三</a></h3><div>Nam dui erat, auctor a, dignissim quis.</div>

解决方案

在可排序调用中，您希望使用以下选项:

helper: "clone",appendTo: "body",//或者任何你想要辅助克隆附加到的元素

这有两件事.首先，它复制被拖动的元素(helper 选项)，然后将该 helper 附加到指定的元素(appendTo 选项).

此处有类似问题:jQuery-Ui:无法将对象拖出手风琴

I have 2 connected sortable lists. One is inside an accordion. When I try to drag items from the sortable in the accordion, the helper disappears as soon as I get outside of the accordion. I can drop to one of the other connected sortables and the item will display, but it just doesn't display while I'm dragging. The accordion also scrolls down if I drag and item down.

I can drag & drop items from either of the other list wherever I need and it works fine. How can I make items not disappear while dragging them from inside an accordion to the outside of it?

I've already tried the containment option but that seems to have no effect.

Here's code to expose the problem that I've taken from these examples: http://jqueryui.com/demos/sortable/#connect-lists

I want to be able to drag items from the accordion into the sortable list. I can actually drop them into the list, but they disappear while I'm dragging them outside of the accordion.

<html>
<head>

<title>Accordion Sortable Failure Test</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".sortable").sortable({connectWith: ".sortable"});
    $("#accordion").accordion({ header: "h3" });
});
</script>

</head>

<body>

<h2>Sortable</h2>
<ul class="sortable">
    <li>Row 1</li>
    <li>Row 2</li>
</ul>

<h2>Accordion</h2>
<div id="accordion">
    <div>
        <h3><a href="#">First</a></h3>
        <ul class="sortable">
            <li>Lorem</li>
            <li>ipsum</li>
            <li>dolor</li>
        </ul>
    </div>
    <div>
        <h3><a href="#">Second</a></h3>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <h3><a href="#">Third</a></h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>

</body>
</html>

解决方案

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 question here: jQuery-Ui: Cannot drag object outside of an accordion

这篇关于jquery sortable 不能拖到手风琴之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆