jquery - ui -排序与绝对定位和左边距

Question

我正在尝试使用jQuery-ui-sortable来允许用户自定义排序手牌。我试图让他们排序的HTML有绝对定位的div元素，有左边框样式，并且是重叠的。

我的问题是，当我使容器元素可排序时，我能够单击和拖动单个卡片，但是当我释放鼠标按钮时，卡片会弹回其原始位置。

由于用户的手牌是由一个数组支持的，所以我不需要sortable来实际地将牌放到它的新位置，尽管这将是一个很好的选择，所以我不必重新绘制手牌。所需要做的就是获取helper/占位符在释放鼠标按钮时悬停在其上的索引。我也尝试了各种方法来获得这个，但我一直在控制台上得到初始索引+ 1。

这是我的代码:http://jsfiddle.net/rcMwq/4/

HTML:

<div class="bottomhand ui-sortable">
    <div class="mycard" style="margin-left: 0em">
        <div class="card">
            <div class="front">
                <div class="index">3
                    <br>♠</div>
                <div class="spotB1">♠</div>
                <div class="spotB3">♠</div>
                <div class="spotB5">♠</div>
                <div class="bottomindex">3
                    <br>♠</div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 1.5em">
        <div class="card">
            <div class="front red">
                <div class="index">4
                    <br>♦</div>
                <div class="spotA1">♦</div>
                <div class="spotA5">♦</div>
                <div class="spotC1">♦</div>
                <div class="spotC5">♦</div>
                <div class="bottomindex">4
                    <br>♦</div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 3em">
        <div class="card">
            <div class="front red">
                <div class="index">7
                    <br>♥</div>
                <div class="spotA1">♥</div>
                <div class="spotA3">♥</div>
                <div class="spotA5">♥</div>
                <div class="spotB2">♥</div>
                <div class="spotC1">♥</div>
                <div class="spotC3">♥</div>
                <div class="spotC5">♥</div>
                <div class="bottomindex">7
                    <br>♥</div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 4.5em">
        <div class="card">
            <div class="front">
                <div class="index">10
                    <br>♠</div>
                <div class="spotA1">♠</div>
                <div class="spotA2">♠</div>
                <div class="spotA4">♠</div>
                <div class="spotA5">♠</div>
                <div class="spotB2">♠</div>
                <div class="spotB4">♠</div>
                <div class="spotC1">♠</div>
                <div class="spotC2">♠</div>
                <div class="spotC4">♠</div>
                <div class="spotC5">♠</div>
                <div class="bottomindex">10
                    <br>♠</div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 6em">
        <div class="card">
            <div class="front red">
                <div class="index">3
                    <br>♥</div>
                <div class="spotB1">♥</div>
                <div class="spotB3">♥</div>
                <div class="spotB5">♥</div>
                <div class="bottomindex">3
                    <br>♥</div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 7.5em">
        <div class="card">
            <div class="front">
                <div class="index">A
                    <br>♣</div>
                <div class="ace">♣</div>
                <div class="bottomindex">A
                    <br>♣</div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 9em">
        <div class="card">
            <div class="front red">
                <div class="index">6
                    <br>♦</div>
                <div class="spotA1">♦</div>
                <div class="spotA3">♦</div>
                <div class="spotA5">♦</div>
                <div class="spotC1">♦</div>
                <div class="spotC3">♦</div>
                <div class="spotC5">♦</div>
                <div class="bottomindex">6
                    <br>♦</div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 10.5em">
        <div class="card">
            <div class="front">
                <div class="index">6
                    <br>♠</div>
                <div class="spotA1">♠</div>
                <div class="spotA3">♠</div>
                <div class="spotA5">♠</div>
                <div class="spotC1">♠</div>
                <div class="spotC3">♠</div>
                <div class="spotC5">♠</div>
                <div class="bottomindex">6
                    <br>♠</div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 12em">
        <div class="card">
            <div class="front red">
                <div class="index">5
                    <br>♥</div>
                <div class="spotA1">♥</div>
                <div class="spotA5">♥</div>
                <div class="spotB3">♥</div>
                <div class="spotC1">♥</div>
                <div class="spotC5">♥</div>
                <div class="bottomindex">5
                    <br>♥</div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 13.5em">
        <div class="card">
            <div class="front">
                <div class="index">5
                    <br>♣</div>
                <div class="spotA1">♣</div>
                <div class="spotA5">♣</div>
                <div class="spotB3">♣</div>
                <div class="spotC1">♣</div>
                <div class="spotC5">♣</div>
                <div class="bottomindex">5
                    <br>♣</div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 15em">
        <div class="card">
            <div class="front red">
                <div class="index">5
                    <br>♦</div>
                <div class="spotA1">♦</div>
                <div class="spotA5">♦</div>
                <div class="spotB3">♦</div>
                <div class="spotC1">♦</div>
                <div class="spotC5">♦</div>
                <div class="bottomindex">5
                    <br>♦</div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 16.5em">
        <div class="card">
            <div class="front">
                <div class="index">8
                    <br>♣</div>
                <div class="spotA1">♣</div>
                <div class="spotA3">♣</div>
                <div class="spotA5">♣</div>
                <div class="spotB2">♣</div>
                <div class="spotB4">♣</div>
                <div class="spotC1">♣</div>
                <div class="spotC3">♣</div>
                <div class="spotC5">♣</div>
                <div class="bottomindex">8
                    <br>♣</div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 18em">
        <div class="card">
            <div class="front red">
                <div class="index">8
                    <br>♦</div>
                <div class="spotA1">♦</div>
                <div class="spotA3">♦</div>
                <div class="spotA5">♦</div>
                <div class="spotB2">♦</div>
                <div class="spotB4">♦</div>
                <div class="spotC1">♦</div>
                <div class="spotC3">♦</div>
                <div class="spotC5">♦</div>
                <div class="bottomindex">8
                    <br>♦</div>
            </div>
        </div>
    </div>
</div>

CSS:

.bottomhand {
    position: absolute;
    margin-left: -12.75em;
    left: 50%;
    width: 19.50em;
    height: 6.00em;
    bottom: 6.00em;
}
.card {
    background-image: url("../images/cardback.png");
    background-size: cover;
    border-color: #808080 #000000 #000000 #808080;
    border-width: 1px;
    border-style: solid;
    position: absolute;
    width: 3.75em;
    height: 5.00em;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.front {
    background-color: #ffffff;
    color: #000000;
    position: absolute;
    width: 100%;
    height: 100%;
}
.red {
    color: #ff0000;
}
.index {
    font-size: 63%;
    font-weight: bold;
    text-align: center;
    position: absolute;
    left: 0.15em;
    top: 0.15em;
}
.bottomindex {
    font-size: 63%;
    font-weight: bold;
    text-align: center;
    position: absolute;
    right: 0.15em;
    bottom: 0.15em;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
}
.ace {
    font-size: 300%;
    position: absolute;
    left: 0.325em;
    top: 0.250em;
}
.spotA1 {
    position: absolute;
    left: 0.60em;
    top: 0.5em;
}
.spotA2 {
    position: absolute;
    left: 0.60em;
    top: 1.5em;
}
.spotA3 {
    position: absolute;
    left: 0.60em;
    top: 2.0em;
}
.spotA4 {
    position: absolute;
    left: 0.60em;
    top: 2.5em;
}
.spotA5 {
    position: absolute;
    left: 0.60em;
    top: 3.5em;
}
.spotB1 {
    position: absolute;
    left: 1.55em;
    top: 0.5em;
}
.spotB2 {
    position: absolute;
    left: 1.55em;
    top: 1.0em;
}
.spotB3 {
    position: absolute;
    left: 1.55em;
    top: 2.0em;
}
.spotB4 {
    position: absolute;
    left: 1.55em;
    top: 3.0em;
}
.spotB5 {
    position: absolute;
    left: 1.55em;
    top: 3.5em;
}
.spotC1 {
    position: absolute;
    left: 2.50em;
    top: 0.5em;
}
.spotC2 {
    position: absolute;
    left: 2.50em;
    top: 1.5em;
}
.spotC3 {
    position: absolute;
    left: 2.50em;
    top: 2.0em;
}
.spotC4 {
    position: absolute;
    left: 2.50em;
    top: 2.5em;
}
.spotC5 {
    position: absolute;
    left: 2.50em;
    top: 3.5em;
}

JS:

$('.bottomhand').sortable({
    items: "> .mycard",
    tolerance: "pointer",
    start: function (event, ui) {
        ui.item.startPos = ui.item.index();
    },
    deactivate: function (event, ui) {
        console.log("deactivate Start position: " + ui.item.startPos);
        console.log("placeholder: " + ui.placeholder.index());
    },
    change: function (event, ui) {
        console.log("change Start position: " + ui.item.startPos);
        console.log("change helper position: " + ui.helper.index());
        console.log("placeholder: " + ui.placeholder.index());
    },
    beforeStop: function (event, ui) {
        console.log("Before Start position: " + ui.item.startPos);
        console.log("Before helper position: " + ui.helper.index());
        console.log("placeholder: " + ui.placeholder.index());
    },
    stop: function (event, ui) {
        console.log("After Start position: " + ui.item.startPos);
        //console.log("After helper position: " + ui.helper.index());
        console.log("placeholder: " + ui.placeholder.index());
    }
});
$('.bottomhand').disableSelection();

Answer 1

因为你是用margin-left来定位卡片，所以它们在dom中的位置对它们在视觉上的位置没有任何影响。

如果你去掉左边距并使用如下格式:

.mycard {
    position: relative;
    margin-left: -2.25em;
    width: 3.75em;
    height: 5.00em;
    float: left;
}

并将.card更改为position:relative;，那么它应该为您工作:

http://jsfiddle.net/petersendidit/rcMwq/12/