2013-04-28 112 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

相关问题