ui.draggable顯示是否取消確認。

Question

我做了一個快速列表，其中每個項目可以移動到垃圾桶。我一旦將它追蹤到垃圾上，它就會隱藏起來。如果您點擊「確定」，則使用remove（）將其完全刪除。

問題是，如果我點擊取消確認，它會保持隱藏狀態（但我希望它再次顯示，因爲它會返回到原來的位置，而不是隱藏）。我嘗試過在許多地方使用ui.draggable.show（），但沒有運氣。有什麼建議？

這裏是的jsfiddle：http://jsfiddle.net/Gdze8/6/

的Javascript/jQuery的：

$(init) 

function init() { 
$(".contentItem").draggable({ 
    revert: function (event, ui) { 
     if ($(event[0]).closest('.list4').length) { 
     var state = !confirm("Are you sure you want to delete?") 
     if (!state) { 

     $(this).remove(); 
     bottomInfo(); 
    } else { 
     return state; 
    } 
    } else { 
     return true; 
    } 
    } 
}); 
$(".list4").droppable({ 
    accept: ".contentItem", 

    drop: function(event, ui) { 
    ui.draggable.hide(); 


    return true; 
    } 
}); 
} 

Answer 1

一，你可以做到這一點的方法是簡單地設置拖動到隨時恢復，然後允許可放開函數來處理是否它應該被刪除或不。這裏是你的小提琴的JS，我明白你的問題的作品：

jQuery(function() { 
    jQuery('.contentItem').draggable({ 
     revert: true 
    }); 
    jQuery('.list4').droppable({ 
     accept: '.contentItem', 
     drop: function (event, ui) { 
      ui.draggable.hide(); 
      if (confirm('Are you sure you want to delete?')) { 
       ui.draggable.remove(); 
      } else { 
       ui.draggable.show(); 
      } 
     } 
    }); 
}); 

這裏是你更新的提琴：http://jsfiddle.net/Gdze8/11/

編輯：不知道什麼bottomInfo（）是，但你完全可以直接調用它在ui.draggable.remove（）下方;如果需要。

Answer 2

嘗試把所有的確認功能在drop事件上可放開：

$(".contentItem").draggable({ 
    revert: true 
}); 
$(".list4").droppable({ 
    accept: ".contentItem", 
    drop: function(event, ui) { 
     var state = !confirm("Are you sure you want to delete?") 
     if (!state) { 
      $(ui.draggable).remove(); 
      bottomInfo(); 
      } else { 
       return state; 
      } 
     return true; 
    } 
}); 

http://jsfiddle.net/UGY2v/

Answer 3

編輯經進一步調查，你不應該需要滴功能都沒有。

jsFiddle

$(init); 

function init() { 
    $(".contentItem").draggable({ 
     revert: function (event, ui) { 
      if ($(event[0]).closest('.list4').length) { 
       var state = !confirm("Are you sure you want to delete?"); 
       if (!state) { 

        $(this).remove(); 
        bottomInfo(); 
       } else { 
        return state; 
       } 
      } else { 
       return true; 
      } 
     } 
    }); 
    $(".list4").droppable({ 
     accept: ".contentItem" 
    }); 
}