1. 首頁
  2. 問答
  3. JQuery-UI-Absolute Positioning and margin-left

JQuery-UI-Absolute Positioning and margin-left

2013-03-05 89 views
0

我試圖用jQuery-ui-sortable來允許用戶自定義排序一張牌。我試圖讓他們排序的HTML具有絕對定位的div元素，具有頁邊空白樣式，並且是重疊的。JQuery-UI-Absolute Positioning and margin-left

我的問題是，當我對我的容器元素進行排序時，我可以點擊並拖動單個卡片，但是當我釋放鼠標按鈕時，卡片會回到其原始位置。

由於用戶的手背後是一個陣列，我不需要排序來實際將卡放置在新的位置，雖然這將是一件很好的事情，所以我不必重繪手。所有需要的是在釋放鼠標按鈕時獲取幫助器/佔位符懸停在其上的索引。我嘗試了很多方法來獲得這個，但我已經在控制檯中獲得了inital index + 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();

來源

2013-03-05 SteveKerr

回答

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/

來源

2013-03-05 15:05:45 PetersenDidIt

相關問題

 相關問題