返回列表 發帖

jquery droppable 的drop 觸發事件

$(function() {
     $( "#water" ).draggable({ revert: true,
                               helper: "clone" ,
     });
     $( "#sun" ).draggable({ revert: true,
                        helper: "clone" ,
     });
     $( "#food" ).draggable({ revert: true,
                         helper: "clone" ,
     });
});

$(document).ready(function(){
     $("#pine").droppable({
        drop: function(){
         ※ 這裡我該怎麼處理? 被#water #sun #food 這些觸碰時 如何產生不同事件? ※
        });
     });
});

現在有三個按鈕ID分別為 #water , #sun , #food

然後分別把這三個 ID 拖進 #pine 時 可以"分別有不同效果" 

就是 當 #water 觸碰到 #pine時 會出現一張圖片或是一個function
如果 當 #sun 觸碰到 #pine時 又會出現另一張圖片或是一個function
如果 當 #food 觸碰到 #pine時 又再出現另一張圖片或是一個function

嘗試這樣放過 可是 失效
drop: function(event,ui){
   if(ui.attr("id")=="water"){
      $(this).append('<img src="pic1"/>')
   }else if(ui.attr("id")=="sun"){
      $(this).append('<img src="pic2"/>')
   }else if(ui.attr("id")=="food"){
      $(this).append('<img src="pic3"/>')
   }
}


請問有大大可以指導一下嗎?

返回列表 回復 發帖