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>♠</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();