2015-10-02 27 views
2

我有兩個div部分是我執行拖放和排序操作我有我的可拖動部分中的5個可拖動記錄的列表我想盡快禁用可拖動記錄我落在droppable部分,以避免重複記錄放在可丟棄div部分禁用dragabble JQuery UI一旦它落在Droppable部分

請任何幫助表示讚賞謝謝!

HTML代碼

<div> 
     <form method="post" action=""> 
      <ol style='list-style:decimal' id="qselected"></ol> 
     </form> 
    </div> 
    <br/> 
    <div> 
     <ul id="qlist"> 
      <?php 
       for($i=1;$i<=5;$i++) 
       { 
       ?> 
        <li id='article_<?php echo $i;?>' > 
         <div class="qitem" style='margin-bottom : 20px;border-bottom:1px solid #e7e7e7;'> 
         <span data-item="1" class="question">Value : <?php echo $i;?></span> 
         </div> 
        </li> 
       <?php 
       } 
      ?> 
     </ul> 
    </div> 

jQuery代碼

$(document).ready(function() { 

     $("#qselected").disableSelection(); 

     $(".qitem").draggable({ 
      containment : "#container", 
      tolerance:"pointer", 
      helper : 'clone', 
      refreshPositions: true , 
      revert : 'invalid', 
      opacity:.4 
     }); 

     $("#qselected, #qlist").droppable({ 
      revert:true, 
      hoverClass : 'ui-state-highlight', 
      greedy: true, 
      refreshPositions: true, 
      drop : function(ev, ui) { 
       $(ui.draggable).clone().appendTo(this); 
       if($(this)[0].id === "qselected") 
       { 
        console.log($(this).closest("button").find('.hello')); 
        $(this).find('.hello').hide(); 
        $(this).find('.btn').show(); 
        return true; 
       } 


      }, 
     }).sortable({ 
       revert: true, 
       refreshPositions: true , 
       helper : 'clone', 
       cursor: "move", 
       delay: 1, 
       tolerance: 'pointer', 
       revert: 50 
      }); 
    }); 
+0

你能創建一個小提琴嗎? –

回答

0

在你降功能做到這一點:

ui.draggable.draggable('disable'); 

這是基於你的代碼爲您小提琴:http://jsfiddle.net/j6dqk54p/1/

+0

謝謝你解決了我的問題......謝謝! – Sjay

+0

不客氣:) – Saar

+0

爲什麼某人如果解決了OP的問題就投下了票? – Saar