jquery ui拖放顯示反饋

我在我的網站上有一些拖放功能，我希望在可拖動元素被點擊/開始拖動時突出顯示邊框顏色中的chage區域。如果點擊/或拖動停止，我希望可以droppable元素的邊界回到原始狀態，我目前有這個代碼，但它不能很好地工作。jquery ui拖放顯示反饋

$(".drag_check").draggable({helper:"clone", opacity:"0.5"}); 
$(".drag_check").mousedown(function() { 
    $('.searchPage').css("border", "solid 3px #00FF66").fadeIn(1000); 
}); 
$(".drag_check").mouseup(function(){ 
    $('.searchPage').css("border", "solid 3px #E2E5F1").fadeIn(1000); 
}) 
$(".searchPage").droppable({ 
    accept:".drag_check", 
    hoverClass: "dropHover", 
    drop: function(ev, ui) { 
     var droppedItem = ui.draggable.children(); 
     cv_file = ui.draggable.map(function() {//map the names and values of each of the selected checkboxes into array 
      return ui.draggable.children().attr('name')+"="+ui.draggable.children().attr('value'); 
     }).get(); 
     var link = ui.draggable.children().attr('name').substr(ui.draggable.children().attr('name').indexOf("[")+1, ui.draggable.children().attr('name').lastIndexOf("]")-8) 
     $.ajax({ 
      type:"POST", 
      url:"/search", 
      data:ui.draggable.children().attr('name')+"="+ui.draggable.children().val()+"&save=Save CVs", 
      success:function(){ 
       window.alert(cv_file+"&save=Save CVs"); 
       $('.shortList').append('<li><span class="inp_bg"><input type="checkbox" name="remove_cv'+link+'" value="Y" /></span><a href="/cv/'+link+'/">'+link+'</a></li>'); 
       $('.searchPage').css("border", "solid 3px #E2E5F1").fadeIn(1000); 
      }, 
      error:function() { 
       alert("Somthing has gone wrong"); 
      } 
     }); 

    } 
});

來源

2010-04-20 sea_1987

的activeClass選項添加到您的.droppable()電話，將其設置爲你想要應用的任何類拖動時生效：

$(".searchPage").droppable({ 
    accept:".drag_check", 
    activeClass: "ui-state-hover", 
    hoverClass: "dropHover", 
    // ..

見jQuery UI的文檔進行此功能的演示：

來源

2010-04-20 10:01:22 awgy

jquery ui拖放顯示反饋

回答

相關問題