当前位置： 文江博客话题详情

jQuery Sortables，项目序列

发布于 2025-01-07 17:44:59 字数 5460 浏览 1 评论 0原文

我在 HTML5 文件中有一组标题和部分，它使用 slipToggles 来显示/隐藏内容。此外，我还设置了可排序功能以允许对列表进行排序。尽管它并不是真正的无序列表或有序列表。这一切都很好。

jsFiddle 具有工作切换和可排序功能。

您会看到，单击“标题”将切换相关部分。单击“拖动”会将项目移动到列表顶部。单击并拖动“拖动”将允许通过拖动对项目进行排序。

我遇到的问题是单击移动到顶部的顺序。我希望该项目淡出...前置..然后淡入。发生的情况是前置，淡出，然后淡入。

我尝试过使用delay()和stop()但没有成功。

任何帮助将不胜感激。

尽管所有代码都在上面小提琴的链接中，但我将其包含在此处，因此问题也是独立的。

HTML

<div id="container">
    <div class="listing">

    <div class="item">
        <header class="shead">
            <h1><span class="drag">DRAG</span><a href="#hold1" class="slide">title 1</a></h1>
        </header>

        <section id="hold1" class="eps hidden">
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
        </section>
        <div class="clear"></div>
    </div> <!-- //item -->

    <div class="item">
        <header class="shead">
            <h1><span class="drag">DRAG</span><a href="#hold2" class="slide">title 2</a></h1>
        </header>

        <section id="hold2" class="eps hidden">
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
        </section>
        <div class="clear"></div>
    </div> <!-- //item -->

    <div class="item">
        <header class="shead">
            <h1><span class="drag">DRAG</span><a href="#hold3" class="slide">title 3</a></h1>
        </header>

        <section id="hold3" class="eps hidden">
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
        </section>
        <div class="clear"></div>
    </div> <!-- //item -->

    <div class="item">
        <header class="shead">
            <h1><span class="drag">DRAG</span><a href="#hold4" class="slide">title 4</a></h1>
        </header>

        <section id="hold4" class="eps hidden">
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
            <p class="new">&raquo; item &laquo;</p>
        </section>
        <div class="clear"></div>
    </div> <!-- //item -->

    </div><!-- //listing -->        
</div>​

CSS

#container { padding: 30px; }

a.slide {
    display: block;
    font: bold 18px Verdana, sans-serif;
    text-decoration: none;
    color: #f00;}

.shead { 
    background: #eee;
    padding: 5px;
    border: 1px solid #aaa;}

.shead:hover{ 
    display: block;
    background: #aaa;
    -webkit-transition: .3s;}

.hidden { display: none; }

.shead h1 { 
    cursor: pointer; 
    font-weight: bold;
    padding: 8px; 
    text-transform: uppercase;}

.eps {
    background: #aaa;
    border: 1px solid #aaa;
    border-top: none;}

.eps p {
    font-size: 12px;
    padding: 5px 10px;
    background: #eee;
    margin: 1px 0;}

.drag {
    float: right; 
    font-weight: normal;
    cursor: move;
    position: relative;}

.clear { clear: both; }

.place { background: #f00; }
​

jquery

$("a.slide").click( function() {
    var eplink = $(this).attr("href");
    $(eplink).slideToggle(500, "easeInOutSine");
    return false;
});


$('#container').sortable({
    items: '.item',
    axis: 'y',
    cursor: 'move',
    connectWith: '.shead',
    forceHelperSize: true,
    forcePlaceholderSize: true,
    handle: '.drag',
    placeholder: 'place',
    scroll: true,
    delay: 200,
    tolerance: 'pointer'
    });
    $('.drag').disableSelection();


$('.drag').click(function(event) {
        var stuff = $(this).closest('.item');
        $(stuff)
            .fadeOut(500)
            .prependTo('.listing')
            .fadeIn(500);
    });​

我真正喜欢的是列表顶部的平滑动画，但我认为这是不可能的。所以我决定淡出、移动、淡入。但无法按照正确的顺序进行操作。

原文

I have a set of headers and sections in an HTML5 file which uses slideToggles to show/hide content. In addition, I've got sortable set up to allow the list to be sorted. Even though it's not really an unordered or ordered list. This all works great.

jsFiddle with working toggles and sortables.

You'll see, clicking on the "title" will toggle the associated section. Clicking on "Drag" will move the item to the top of the list. Click-dragging on "Drag" will allow sorting items via dragging.

The problem I have is the sequence of the click to move to top. I'd like the item to fade out... prepend.. then fade in. What is happening is Prepend, fadeOut, then fadeIn.

I've tried using delay() and stop() with no luck.

Any help would be appreciated.

Although all the code is in the link to the fiddle above, I'm including it here so the question is also self-contained.

HTML

<div id="container">
    <div class="listing">

    <div class="item">
        <header class="shead">
            <h1><span class="drag">DRAG</span><a href="#hold1" class="slide">title 1</a></h1>
        </header>

        <section id="hold1" class="eps hidden">
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
        </section>
        <div class="clear"></div>
    </div> <!-- //item -->

    <div class="item">
        <header class="shead">
            <h1><span class="drag">DRAG</span><a href="#hold2" class="slide">title 2</a></h1>
        </header>

        <section id="hold2" class="eps hidden">
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
        </section>
        <div class="clear"></div>
    </div> <!-- //item -->

    <div class="item">
        <header class="shead">
            <h1><span class="drag">DRAG</span><a href="#hold3" class="slide">title 3</a></h1>
        </header>

        <section id="hold3" class="eps hidden">
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
        </section>
        <div class="clear"></div>
    </div> <!-- //item -->

    <div class="item">
        <header class="shead">
            <h1><span class="drag">DRAG</span><a href="#hold4" class="slide">title 4</a></h1>
        </header>

        <section id="hold4" class="eps hidden">
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
            <p class="new">» item «</p>
        </section>
        <div class="clear"></div>
    </div> <!-- //item -->

    </div><!-- //listing -->        
</div>​

CSS

#container { padding: 30px; }

a.slide {
    display: block;
    font: bold 18px Verdana, sans-serif;
    text-decoration: none;
    color: #f00;}

.shead { 
    background: #eee;
    padding: 5px;
    border: 1px solid #aaa;}

.shead:hover{ 
    display: block;
    background: #aaa;
    -webkit-transition: .3s;}

.hidden { display: none; }

.shead h1 { 
    cursor: pointer; 
    font-weight: bold;
    padding: 8px; 
    text-transform: uppercase;}

.eps {
    background: #aaa;
    border: 1px solid #aaa;
    border-top: none;}

.eps p {
    font-size: 12px;
    padding: 5px 10px;
    background: #eee;
    margin: 1px 0;}

.drag {
    float: right; 
    font-weight: normal;
    cursor: move;
    position: relative;}

.clear { clear: both; }

.place { background: #f00; }
​

jquery

$("a.slide").click( function() {
    var eplink = $(this).attr("href");
    $(eplink).slideToggle(500, "easeInOutSine");
    return false;
});


$('#container').sortable({
    items: '.item',
    axis: 'y',
    cursor: 'move',
    connectWith: '.shead',
    forceHelperSize: true,
    forcePlaceholderSize: true,
    handle: '.drag',
    placeholder: 'place',
    scroll: true,
    delay: 200,
    tolerance: 'pointer'
    });
    $('.drag').disableSelection();


$('.drag').click(function(event) {
        var stuff = $(this).closest('.item');
        $(stuff)
            .fadeOut(500)
            .prependTo('.listing')
            .fadeIn(500);
    });​

What I would really love is a smooth animation to the top of the list, but I don't think that's possible. So I settled on fade out, move, fade in. But can't get that working in the correct sequence.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

百变从容 2025-01-14 17:44:59

fadeOut 函数采用一个可选的回调参数，该参数将在动画完成后调用。

因此，要解决您的具体问题：

    $(stuff)
        .fadeOut(500, function() {
            $(stuff).prependTo('.listing')
                    .fadeIn(500);
        })

请参阅此 jsFiddle 更新

The fadeOut function takes an optional callback parameter, which is to be invoked after the animation has completed.

So, to solve your specific problem:

    $(stuff)
        .fadeOut(500, function() {
            $(stuff).prependTo('.listing')
                    .fadeIn(500);
        })

See this jsFiddle update

回复 原文
~没有更多了~

关于作者

煞人兵器

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

饮湿

文章 0 评论 0

明月

文章 0 评论 0

02

文章 0 评论 0

hs1283

文章 0 评论 0

风向决定发型

文章 0 评论 0

落花浅忆

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文