2013-04-28 109 views
2

我有一個可拖放/可拖放的小型jquery應用程序,並且我在保留可拖動項目時遇到問題,並且在克隆被刪除後仍保持其原始位置。如何在拖放對象後保留其原始位置

任何人都可以協助嗎?

http://jsfiddle.net/franco13/vLSZf/1/

謝謝。

$(init); 

function init() { 

    $('.teamEmblem').draggable({ 
     // containment: $('.teamEmblem').parent(), // this does not work 
     cursor: 'move', 
     helper: 'clone', 
     obstacle: ".teamEmblem", // this does not work 
     preventCollision: true, // this does not work 
     revert: true 
    }); 

    $('.winner').droppable({ 
     hoverClass: 'hovered', 
     tolerance: 'touch', 
     drop: handleCardDrop1 
    }); 

} 

function handleCardDrop1(event, ui) { 

    if (true) { 
     ui.draggable.addClass('correct'); 
     ui.draggable.draggable('disable'); 
     $(this).droppable('disable'); 
     ui.draggable.position({ 
      of: $(this), 
      my: 'left top', 
      at: 'left top' 
     }); 
     ui.draggable.draggable('option', 'revert', false); 
    } 

} 

回答

4

你可以克隆拖動元素和應用一點風度克隆的元素:

SEE DEMO

function handleCardDrop1(event, ui) { 
    if (true) { 

     ui.draggable.addClass('correct'); 
     ui.draggable.draggable('disable'); 
     $(this).droppable('disable'); 

     var dragged = ui.draggable.clone(true); 
     dragged.position({ 
      of: $(this), 
      my: 'left top', 
      at: 'left top' 
     }).css({ 
      position: 'absolute', 
      display: 'block', 
      margin: '0 auto' 
     }); 
     ui.draggable.draggable('option', 'revert', false); 
     $('body').append(dragged); 
    } 

} 
+0

感謝@roasted。 (顯然)你的jsfiddle工作。我將把你的代碼加入到我的腳本中,然後回覆並接受這個答案。非常感謝您的幫助。 – 2013-04-28 11:40:39

+0

這是完美的,正是我所期待的。謝謝@roasted! – 2013-04-28 11:49:51

+0

歡迎您,很高興幫助 – 2013-04-28 12:39:48