标签: jquery-ui-sortable

我创建了一个演示:http://pastebin.me/584b9a86d715c9ba85b7bebf0375e237

当滚动条位于底部并拖动项目以对其进行排序时,会导致滚动条向上跳跃.它似乎在FF,Safari,Chrome和IE(至少IE8)中这样做.

在我的Mac上的Firefox中,当滚动条位于底部时它会跳起来,但也会在整个列表中添加一个漂亮的闪存.它只是在向上滚动整个列表时闪烁.我相信,如果我弄清楚是什么导致向上滚动(如果我可以阻止它),闪烁也将停止.

我不喜欢它跳起来像那样的b/c我发现它很刺耳和混乱.我知道这是一个角落的案例,但如果可以,我想解决它.

那么,有没有办法防止它向上滚动？或者,是什么导致它向上滚动？

谢谢

我正在尝试开发一个具有以下功能的小页面:

1. 页面将有两个div:一个是#origin,包含很多缩略图,第二个是#drop,可以放下图像(最多只有3个).
2. 需要可以将图像从#drop拖放回原点.
3. #drop需要是可排序的,因为3个所选图像的顺序很重要.
4. 当放在#drop上时,图像应该对齐,就好像它们从一开始就显示原始图像一样.

我之前从未使用过jQuery,之前我甚至有一个工作页面原型,我已经通过本机HTML5拖放事件在两个容器之间进行了拖放,但是当我将sortable()jquery功能添加到#drop时,图像无法再被拖回#origin,这会破坏我的功能.

所以,我重新开始并希望实现拖放功能以及使用jQuery进行排序.我已经阅读了所有可拖动,可放置和可排序功能的完整API,但是我无法让它工作.不确定这是我用于每个功能的设置.

在小提琴上,您可以看到图像变得可拖动,我可以看到我指定的设置(不透明度,光标),但图像不能放在#drop上.

根据我的理解,使图像可拖动,图像具有"可拖动"类,以及使用".draggable"接受#drop droppable的组合,它应该允许最基本的功能,但即使这样也不会采取.另外我读到如果draggable和droppable都具有相同的"范围"设置,它也应该工作,但事实并非如此.

这是页面代码的简单版本,加上jsFiddle:http://jsfiddle.net/39khs/

码:

CSS:

#origin {
  background-color: green;
}
#drop {
  background-color: red;
  min-height: 120px;
}

JS:

$("img").draggable({ helper: "clone", opacity: 0.5, cursor: "crosshair", scope: "drop" });
$("#drop").droppable({ accept: ".draggable", scope: "drop"});
$("#drop").sortable();

HTML:

<div id="wrapper">
    <div id="origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
        <img src="http://placehold.it/140x100" id="two" title="two" class="draggable" />
        <img src="http://placehold.it/140x100" id="three" title="three" class="draggable" />
    </div>
  <p>test</p>
    <div id="drop" class="fbox">

    </div>
</div>

任何帮助是极大的赞赏.

是否有任何解决办法使Jquery-ui可以在基于Android或IOS的触摸设备上进行排序？

我已经实现了jQueryUI可排序列表,它的工作非常好.在某个时间点,我希望禁用进一步排序并按原样保留项目顺序,而无需用户更改它.

它尝试了这样的事情:

$('.sortable').sortable('disable'); 

还有这个:

$('.sortable').each(function() { $(this).sortable('disable'); });

和:

$('.sortable').disable(); 

和:

$('.sortable').cancel(); 

以及所有这些的各种组合.一切都没有成功.

任何人都可以告诉Ne Right Way ™这样做吗？

更新:我正在使用jQuery 1.3.2和jQueryUI 1.7.2.一个可能的问题可能是我在页面上有两个独立的可排序列表,所以我有sortable1和sortable2类.我其实在做:

$('.sortable2').sortable('disable'); 

Update2:问题是我使用.sortable而不是#sortable.现在一切都很好.

我希望在容器div中水平排序我的div.
我在JQuery网站上找到了一个例子,但这是垂直排序.我希望它是水平的.

我想做它排序#sortable <div>.

请您指导我如何以水平方式转换此垂直排序.

CSS

<style type="text/css">
    #draggable1 { width: 150px; height: 35px; padding: 0.5em; }
    #draggable2 { width: 150px; height: 35px; padding: 0.5em; }
    #draggable3 { width: 150px; height: 35px; padding: 0.5em; }

    #sortable { width: 700px; height: 35px; padding: 0.5em; }
</style>

JavaScript的

<script type="text/javascript">
    $(function() {  
        $("#sortable").sortable({
            revert: true
        }); 
    });
</script>

HTML

<div class="demo">
    <div id="sortable" class="ui-state-default">
        <div id = "draggable1" class="ui-state-default">Home</div>
        <div id = "draggable2" class="ui-state-default">Contact Us</div>
        <div id = …

这个问题已经过去了,但似乎没有人像我一样遇到同样的问题.

当我做这样的事情

$(function(){
    $('#unique-ul').sortable({items:'li'});
});

我希望它"只是工作".总的来说,确实如此.我可以将任何<li>从任何列表拖到任何其他列表,并且用它拖动<li>的任何子列表.

然而,在拖动时,它似乎真的很困惑它应该被丢弃的位置.这是一个使用1.8.0的例子; 它显示相同的行为.

http://jsbin.com/ewuxi3/

我发现的所有其他响应让我相信jQuery UI支持这种行为; 例如,这是针对嵌套draggables针对1.7注册的错误:http://dev.jqueryui.com/ticket/4333

我找不到其他有这个问题的人所以它暗示我做错了.有线索吗？

我目前有一个完美的jQuery可排序列表.我能够移动'li'元素.但是,如何创建一个按钮将特定的"li"元素向上移动一个,将上面的元素向下移动(当然对于向下按钮则相反)？我环顾谷歌,发现很少.即使是链接也太棒了!

谢谢!

如您所知,在jQuery UI可拖动交互中,被拖动的元素会获得.ui-draggable-dragging类.排序有什么这样的吗？

这里的例子.我想在拖动时更改元素的背景颜色.在拖动元素时添加哪个类？.ui-sortable-dragging？

这让我很难过.以下代码返回",,,,,,":

<script type="text/javascript">
$(function() {
    $('#listB').sortable({
        connectWith: '#listA',
        update: function(event, ui) {
            var result = $(this).sortable('toArray');
            alert(result);
            }
    });
    $('#listA').sortable({
        connectWith: '#listB'
    });
});
</script>

<div id="boxA">
    <ul id="listA" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul>
</div>

<div id="boxB">
    <ul id="listB" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul> …

我的问题:可排序的事件:当我在列表中拖动某些内容或者对列表进行排序时触发.但我只想在拖出项目时启动该功能.

我的代码

        $(document).ready(function ust()
        {    
            $('#div1').sortable({
                out: function(event, ui) { $('#nfo').append('OUT<br />'); }
            });

        });

工作示例 http://jsfiddle.net/FrbW8/22/