3

我有一个JsFiddle来解决我要解决的问题。

本质上，我有一组复选框。我还有一个字段可让您将复选框项目添加到该集合中。最后，我有向上和向下箭头，可让您更改排序顺序。

我遇到的问题是添加到集合中的项目反应奇怪。当我单击以将这些项目向上移动时，它们会跳到集合的顶部。我查看了这个链接并找到了很好的信息，但仍然无法解决问题。

代码如下。我很感激你能提供的任何建议！

HTML

<div id="main">
    <div id="addbox">
        <p>Enter value:
            <br>
            <input id="Text1" type="text" size="38">
            <input id="Button3" type="submit" value="+">
        </p>
    </div>
    <div id="selectbox">
        <p>You can also select from these:</p>
        <div id="mobilecb">
            <div class="cbholder">
                <div class="cbitem" id="cbitem-1-id">
                    <input type="checkbox" checked="" class="thecb" value="1" name="collection[]">1</div>
                <div class="cbup"></div>
                <div class="cbdown"></div>
            </div>
            <div class="cbholder">
                <div class="cbitem" id="cbitem-2-id">
                    <input type="checkbox" checked="" class="thecb" value="1" name="collection[]">2</div>
                <div class="cbup"></div>
                <div class="cbdown"></div>
            </div>
            <div class="cbholder">
                <div class="cbitem" id="cbitem-3-id">
                    <input type="checkbox" checked="" class="thecb" value="1" name="collection[]">3</div>
                <div class="cbup"></div>
                <div class="cbdown"></div>
            </div>
        </div>
    </div>
</div>

CSS

#main {
    width:400px;
}
.cbholder {
    border: 1px solid #ccc;
}
}
.cblocation {
    float:left;
    margin: 10px 10px 10px 0px;
    width:80%;
}
.cbdown {
    border-color: black transparent transparent;
    border-style: solid;
    border-width: 11px 7px 10px;
    float: right;
    margin-top:0px
}
.cbup {
    border-color: transparent transparent black !important;
    border-style: solid;
    border-width: 11px 7px 10px;
    float: right;
    margin: 0px 4px 0px 20px;
}
#mobilecb {
    clear:both;
    display:inline-block!important;
    text-align:left;
    float:left;
    background:#fff;
    font-size:.8em;
    border:1px solid #000;
}
.cbholder {
    margin: 20px 0 0px 0;
}

jQuery (1.4.1)

 $('#Button3').click(function () {
     $('#mobilecb').append('<div class="cbholder"><div class="cbitem"><input type="checkbox"    checked="" class="thecb" value="' + $('#Text1').val() + '" name="collection[]">' + $('#Text1').val() + '</div><div class="cbup"></div><div class="cbdown"></div>   </div>')
         .bind("click", function (e) {
         $('.cbup').click(function () {
             var parent = $(this).parent();
             parent.insertBefore(parent.prev());
         });
         $('.cbdown').click(function () {
             var parent = $(this).parent();
             parent.insertAfter(parent.next());
         });
     });
 });

 $('.cbup').click(function () {
     var parent = $(this).parent();
     parent.insertBefore(parent.prev());
 });
 $('.cbdown').click(function () {
     var parent = $(this).parent();
     parent.insertAfter(parent.next());
 });
4

2 回答 2

1

如何使用可排序的 Jquery UI。http://jqueryui.com/sortable/

于 2013-03-23T03:26:53.493 回答
1

在http://jsfiddle.net/U2E3Y/10/上解决。$('#mobilecb')您已经使用 click 事件限制了父元素。

于 2013-03-23T03:52:41.823 回答