0

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

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

由于用户的手由一个数组支持，因此我不需要排序即可将卡片实际放置在新位置，尽管这将是一个不错的选择，因此我不必重新绘制手。所需要的只是获取释放鼠标按钮时助手/占位符悬停的索引。我也尝试了多种方法来获得它，但我一直在控制台中获得初始索引 + 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>♠&lt;/div>
                <div class="spotB1">♠&lt;/div>
                <div class="spotB3">♠&lt;/div>
                <div class="spotB5">♠&lt;/div>
                <div class="bottomindex">3
                    <br>♠&lt;/div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 1.5em">
        <div class="card">
            <div class="front red">
                <div class="index">4
                    <br>♦&lt;/div>
                <div class="spotA1">♦&lt;/div>
                <div class="spotA5">♦&lt;/div>
                <div class="spotC1">♦&lt;/div>
                <div class="spotC5">♦&lt;/div>
                <div class="bottomindex">4
                    <br>♦&lt;/div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 3em">
        <div class="card">
            <div class="front red">
                <div class="index">7
                    <br>♥&lt;/div>
                <div class="spotA1">♥&lt;/div>
                <div class="spotA3">♥&lt;/div>
                <div class="spotA5">♥&lt;/div>
                <div class="spotB2">♥&lt;/div>
                <div class="spotC1">♥&lt;/div>
                <div class="spotC3">♥&lt;/div>
                <div class="spotC5">♥&lt;/div>
                <div class="bottomindex">7
                    <br>♥&lt;/div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 4.5em">
        <div class="card">
            <div class="front">
                <div class="index">10
                    <br>♠&lt;/div>
                <div class="spotA1">♠&lt;/div>
                <div class="spotA2">♠&lt;/div>
                <div class="spotA4">♠&lt;/div>
                <div class="spotA5">♠&lt;/div>
                <div class="spotB2">♠&lt;/div>
                <div class="spotB4">♠&lt;/div>
                <div class="spotC1">♠&lt;/div>
                <div class="spotC2">♠&lt;/div>
                <div class="spotC4">♠&lt;/div>
                <div class="spotC5">♠&lt;/div>
                <div class="bottomindex">10
                    <br>♠&lt;/div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 6em">
        <div class="card">
            <div class="front red">
                <div class="index">3
                    <br>♥&lt;/div>
                <div class="spotB1">♥&lt;/div>
                <div class="spotB3">♥&lt;/div>
                <div class="spotB5">♥&lt;/div>
                <div class="bottomindex">3
                    <br>♥&lt;/div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 7.5em">
        <div class="card">
            <div class="front">
                <div class="index">A
                    <br>♣&lt;/div>
                <div class="ace">♣&lt;/div>
                <div class="bottomindex">A
                    <br>♣&lt;/div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 9em">
        <div class="card">
            <div class="front red">
                <div class="index">6
                    <br>♦&lt;/div>
                <div class="spotA1">♦&lt;/div>
                <div class="spotA3">♦&lt;/div>
                <div class="spotA5">♦&lt;/div>
                <div class="spotC1">♦&lt;/div>
                <div class="spotC3">♦&lt;/div>
                <div class="spotC5">♦&lt;/div>
                <div class="bottomindex">6
                    <br>♦&lt;/div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 10.5em">
        <div class="card">
            <div class="front">
                <div class="index">6
                    <br>♠&lt;/div>
                <div class="spotA1">♠&lt;/div>
                <div class="spotA3">♠&lt;/div>
                <div class="spotA5">♠&lt;/div>
                <div class="spotC1">♠&lt;/div>
                <div class="spotC3">♠&lt;/div>
                <div class="spotC5">♠&lt;/div>
                <div class="bottomindex">6
                    <br>♠&lt;/div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 12em">
        <div class="card">
            <div class="front red">
                <div class="index">5
                    <br>♥&lt;/div>
                <div class="spotA1">♥&lt;/div>
                <div class="spotA5">♥&lt;/div>
                <div class="spotB3">♥&lt;/div>
                <div class="spotC1">♥&lt;/div>
                <div class="spotC5">♥&lt;/div>
                <div class="bottomindex">5
                    <br>♥&lt;/div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 13.5em">
        <div class="card">
            <div class="front">
                <div class="index">5
                    <br>♣&lt;/div>
                <div class="spotA1">♣&lt;/div>
                <div class="spotA5">♣&lt;/div>
                <div class="spotB3">♣&lt;/div>
                <div class="spotC1">♣&lt;/div>
                <div class="spotC5">♣&lt;/div>
                <div class="bottomindex">5
                    <br>♣&lt;/div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 15em">
        <div class="card">
            <div class="front red">
                <div class="index">5
                    <br>♦&lt;/div>
                <div class="spotA1">♦&lt;/div>
                <div class="spotA5">♦&lt;/div>
                <div class="spotB3">♦&lt;/div>
                <div class="spotC1">♦&lt;/div>
                <div class="spotC5">♦&lt;/div>
                <div class="bottomindex">5
                    <br>♦&lt;/div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 16.5em">
        <div class="card">
            <div class="front">
                <div class="index">8
                    <br>♣&lt;/div>
                <div class="spotA1">♣&lt;/div>
                <div class="spotA3">♣&lt;/div>
                <div class="spotA5">♣&lt;/div>
                <div class="spotB2">♣&lt;/div>
                <div class="spotB4">♣&lt;/div>
                <div class="spotC1">♣&lt;/div>
                <div class="spotC3">♣&lt;/div>
                <div class="spotC5">♣&lt;/div>
                <div class="bottomindex">8
                    <br>♣&lt;/div>
            </div>
        </div>
    </div>
    <div class="mycard" style="margin-left: 18em">
        <div class="card">
            <div class="front red">
                <div class="index">8
                    <br>♦&lt;/div>
                <div class="spotA1">♦&lt;/div>
                <div class="spotA3">♦&lt;/div>
                <div class="spotA5">♦&lt;/div>
                <div class="spotB2">♦&lt;/div>
                <div class="spotB4">♦&lt;/div>
                <div class="spotC1">♦&lt;/div>
                <div class="spotC3">♦&lt;/div>
                <div class="spotC5">♦&lt;/div>
                <div class="bottomindex">8
                    <br>♦&lt;/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();
4

1 回答 1

1

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

如果您删除 margin-left 并使用类似的东西：

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

然后改变它应该对你有用.card：position:relative;

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

于 2013-03-05T15:05:45.367 回答