JQuery-UI-sortable with Absolute Positioning and margin-left

时间：2013-03-05 14:47:41

标签： jquery jquery-ui jquery-ui-sortable

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

我的问题是，当我对我的容器元素进行排序时，我能够单击并拖动各个卡片，但是当我释放鼠标按钮时，卡片会快速回到原来的位置。

由于用户的手由数组支持，我不需要将卡实际丢弃到新的位置，尽管这将是一个很好的，所以我不需要重绘手。所需的只是获取释放鼠标按钮时助手/占位符悬停的索引。我已经尝试了各种方法来获得这个，但我已经在控制台中获得了初始索引+ 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();

1 个答案:

答案 0 :(得分：1)

因为您正在使用边距定位卡片，所以他们在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/

相关问题
最新问题