jQuery UI拖/放圖動畫問題

Question

我想使用jQuery Ui對拖放的某些項進行排序。

如果一個元素通過dropzone，則dropzone應該展開。這很好。但我的問題是，event.target.clientWidth的屬性仍然是25.所以dropzone仍然是25px，而容器是allready 250px。

我不知道如何去改變它（我試過媒體鏈接= event.target.clientWidth 250但這並不工作），希望你也許可以幫我

這是我的代碼的一部分：

HTML：

<section id="plot" class="plot"> 
     <div class="cards"> 
      <div id="card__container" class="card__container" style="width: 1392px;"> 
       <div class="card__dropzone"> 
        <div class="card__dropzone--inner"></div> 
       </div> 
        <div><div class="card ui-widget-content" id="card1"> 
         <span class="card__id">1</span> 
         <span class="card__text">Hektor runs away followed by police</span> 
        </div> 
       </div> 
       <div class="card__dropzone"> 
        <div class="card__dropzone--inner"></div> 
       </div> 
       <div><div class="card ui-widget-content" id="card2"> 
        <span class="card__id">2</span> 
        <span class="card__text">Hektor stumbles and falls</span> 
       </div></div> 

       <div class="card__dropzone"> 
        <div class="card__dropzone--inner"></div> 
       </div> 
       <div><div class="card ui-widget-content" id="card3"> 
        <span class="card__id">3</span> 
        <span class="card__text">Hektor get catched by police and trys to bluff hisself out</span> 
       </div></div> 

       <div class="card__dropzone"> 
        <div class="card__dropzone--inner"></div> 
       </div> 
       <div><div class="card ui-widget-content" id="card5"> 
        <span class="card__id">5</span> 
        <span class="card__text">Hektor did say something stupid</span> 
       </div></div> 

       <div class="card__dropzone"> 
        <div class="card__dropzone--inner"></div> 
       </div> 
       <div><div class="card ui-widget-content" id="card4"> 
        <span class="card__id">4</span> 
        <span class="card__text">Police a bit confused and believes him</span> 
       </div></div> 

       <div class="card__dropzone"> 
        <div class="card__dropzone--inner"></div> 
       </div> 
       <div><div class="card ui-widget-content" id="card6"> 
        <span class="card__id">6</span> 
        <span class="card__text">Police arrested him</span> 
       </div> 
       </div> 
      </div> 
     </div> 
    </section> 

的CSS：

.card { 
      cursor: pointer; 
     } 
     .plot { 
      overflow-y: hidden; 
      overflow-x: visible; 
      height: 100%; 
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      width: 100vw; 
      padding-top: 25%; 
     } 
     .cards { 
      position: relative; 
      left: 0; 
      right: 0; 
      margin: auto; 
     } 
     .card__container { 
      left:0; 
      right: 0; 
      margin: 25px auto; 
      height: 100%; 
      display: table; 
     } 
     .card { 
      margin-top: 50px; 
      width: 200px; 
      height: 150px; 
      border: 1px solid #d3d3d3; 
      display: table-cell; 
     } 
     .card__dropzone--inner { 
      width: 25px; 
      height: 150px; 
     } 
     .card__id { 
      font-size: 1.5em; 
      font-weight: bold; 
      display: block; 
      padding: 10px; 
     } 
     .card__text { 
      display: block; 
      padding: 10px; 
      font-family: sans-serif; 
     } 
     .card__dropzone { 
      display: table-cell; 
      vertical-align: top; 
     } 
     .card__dropzone--active { 
      background: blue; 
      box-shadow: 0 0 10px blue; 
     } 

的Javascript：

$(document).ready(function() { 
    $(".card").draggable({ helper: "clone", 
          revert: true, 
          opacity: 0.5, 
          scroll:true, 
          scrollSensitivity: 100}); 
    $(".card__dropzone--inner").droppable({ 
     activeClass: "card__dropzone--active", 
     over: function(event) { 
      $(this).animate({ 
       width: "250px" 
      }, 200); 
      event.target.clientWidth = 250; 
      console.log("over"); 
     }, 
     out: function(event) { 
      console.log("now?!"); 
      $(event.target).animate({ 
       width: "25px" 
      },200); 
      event.target.clientWidth = 25; 
      console.log("out"); 
     }, 
     drop: function(event) { 
      console.log("drop"); 
     } 
    }); 
}); 

，這是我的jsfiddle

http://jsfiddle.net/qthrvt8s/

Answer 1

您必須添加refreshPositions: true同時初始化.draggable()告訴您可投放區域的帳戶採取新的層面：

$(document).ready(function() { 
    $(".card").draggable({ helper: "clone", 
          revert: true, 
          opacity: 0.5, 
          scroll:true, 
          refreshPositions: true, 
          scrollSensitivity: 100}); 
    $(".card__dropzone--inner").droppable({ 
     activeClass: "card__dropzone--active", 
     over: function(event) { 
      $(this).animate({ 
       width: "250px" 
      }, 200); 
      console.log("over"); 
     }, 
     out: function(event) { 
      console.log("now?!"); 
      $(event.target).animate({ 
       width: "25px" 
      },200); 
      console.log("out"); 
     }, 
     drop: function(event) { 
      console.log("drop"); 
     } 
    }); 
}); 

請參閱updated fiddle