jquery可拖放droppable不能顯示多個div

Question

我跟着jQuery UI可拖動和droppable嘗試在特定區域顯示3個div。 下面是代碼： --css：

#content-1 { width: 200px; height: 100px; border: 1px solid red; display: none; } 
     #content-2 { width: 200px; height: 100px; border: 1px solid red; display: none; } 
     #content-3 { width: 200px; height: 100px; border: 1px solid red; display: none; } 

--js：

$(function() { 
      $("#li-1").draggable({ 
       appendTo: "body", 
       helper: "clone" 
      }); 
      $(".ui-widget-content").droppable({ 
       drop: function(event, ui) { 
        $("#content-1").show(); 
       } 
      }); 
      $("#li-2").draggable({ 
       appendTo: "body", 
       helper: "clone" 
      }); 
      $(".ui-widget-content").droppable({ 
       drop: function(event, ui) { 
        $("#content-2").show(); 
       } 
      }); 
      $("#li-3").draggable({ 
       appendTo: "body", 
       helper: "clone" 
      }); 
      $(".ui-widget-content").droppable({ 
       drop: function(event, ui) { 
        $("#content-3").show(); 
       } 
      }); 
     }); 

--html：

<div id="products"> 
     <div id="catalog"> 
      <div> 
       <ul> 
        <li id="li-1">dashboard-1</li> 
        <li id="li-2">dashboard2</li> 
        <li id="li-3">dashboard3</li> 
       </ul> 
      </div> 

     </div> 
    </div> 
    <div id="cart"> 
     <div class="ui-widget-content"> 
      <div id="content-1"></div> 
      <div id="content-2"></div> 
      <div id="content-3"></div> 
     </div> 
    </div> 

的結果是，它只是可以只顯示一個DIV 。這段代碼中的錯誤是什麼？ 在此先感謝！

Answer 1

我把你的代碼放入http://jsbin.com的麻煩看看發生了什麼。下次請親自去做。

你的問題是你正在定義相同的功能.droppable到相同的元素.ui-widget-content。所以很自然你會重寫三次相同函數的定義，只有最後一個定義正在工作。

這裏是你怎麼想的那樣做：

$(function() { 
     $("#li-1").draggable({ 
      appendTo: "body", 
      helper: "clone" 
     }); 
     $("#li-2").draggable({ 
      appendTo: "body", 
      helper: "clone" 
     }); 
     $("#li-3").draggable({ 
      appendTo: "body", 
      helper: "clone" 
     }); 
     $(".ui-widget-content").droppable({ 
      drop: function(event, ui) { 

       // Retrieving the id of the element being dragged 
       var element = ui.draggable.attr('id'); 

       if (element == "li-1") { 
       $("#content-1").show(); 
       } else if (element == "li-2") { 
       $("#content-2").show(); 
       } else if (element == "li-3") { 
       $("#content-3").show(); 
       } 
      } 
     }); 
    }); 

演示：http://jsbin.com/ozixur/3/edit