Draggable был droppped и клонирует, но клон не перетаскиваемый

Биты скрытого заголовка там, надеюсь, вы можете помочь :)Draggable был droppped и клонирует, но клон не перетаскиваемый

Когда я перетащить один из Draggables, он клонирует себя, но не падает на droppables :(

любые идеи

Мой код:

<!DOCTYPE HTML> 
    <html> 
    <head> 
     <title>jQi</title> 
     <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript" language="javascript" src="jquery-ui-1.8.4.custom.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       var i = 0; 
       var a = 250; 
       var b = 19; 

       //append board 
       $('body').append('<ul id="jQiBoard"></ul>'); 
       while (i < b*b) { 
        $('ul#jQiBoard').append('<li class="jQiNode"></li>'); 
        i++; 
       } 

       //init mouseover 
       $('li.jQiNode').stop().mouseover(function() { 
        $(this).animate({ 
         opacity: 0.65 
        }, a); 
       }); 
       $('li.jQiNode').stop().mouseout(function() { 
        $(this).animate({ 
         opacity: 1.00 
        }, a); 
       }); 

       //append stones 
       $('body').append('<ul id="jQiStones"></ul>'); 
       $('ul#jQiStones').append('<li class="jQiWhite"></li>'); 
       $('ul#jQiStones').append('<li class="jQiBlack"></li>'); 

       $('li.jQiWhite').draggable({ 
        snap: 'li.jQiNode', 
        helper: 'clone', 
        zIndex: 100, 
        stop: function(event, ui) { 

        } 
       }); 
       $('li.jQiBlack').draggable({ 
        snap: 'li.jQiNode', 
        helper: 'clone', 
        zIndex: 100, 
        stop: function(event, ui) { 
         alert(ui.draggable); 
        } 
       }); 
       $('li.jQiNode').droppable({ 
        accept: 'li.jQiNode' 
       }); 
      }); 
     </script> 
     <style type="text/css"> 
      ul#jQiBoard { width: 570px; height: 570px; float: left; margin: 0; padding: 0; border: 2px solid black; } 
      li.jQiNode { display: block; width: 30px; height: 30px; float: left; list-style-type: none; border: 0px solid silver; background-color: #ae996f; background-image: url(jQiNode.gif); } 
      ul#jQiStones { padding: 10px; border: 1px solid silver; float: left; margin: 0; padding: 0; } 
      li.jQiWhite { width: 30px; height: 30px; background-color: transparent; list-style-type: none; background-image: url(jQiWhite.gif); } 
      li.jQiBlack { width: 30px; height: 30px; background-color: transparent; list-style-type: none; background-image: url(jQiBlack.gif); } 
     </style> 
    </head> 
    <body> 

    </body> 
    </html>

источник

2010-09-06 Barrie Reader

Я изменить свой код так:

$(document).ready(function() { 
    var i = 0; 
    var a = 250; 
    var b = 19; 

    //append board 
    $('body').append('<ul id="jQiBoard"></ul>'); 
    while (i < b*b) { 
     $('ul#jQiBoard').append('<li class="jQiNode"></li>'); 
     i++; 
    } 

    //init mouseover 
    $('li.jQiNode').stop().mouseover(function() { 
     $(this).animate({ 
      opacity: 0.65 
     }, a); 
    }); 
    $('li.jQiNode').stop().mouseout(function() { 
     $(this).animate({ 
      opacity: 1.00 
     }, a); 
    }); 

    //append stones 
    $('body').append('<ul id="jQiStones"></ul>'); 
    $('ul#jQiStones').append('<li class="jQiWhite"></li>'); 
    $('ul#jQiStones').append('<li class="jQiBlack"></li>'); 

    $('li.jQiWhite').draggable({ 
     snap: 'li.jQiNode', 
     helper: 'clone', 
     zIndex: 100, 
     stop: function(event, ui) { 

     } 
    }); 
    $('li.jQiBlack').draggable({ 
     snap: 'li.jQiNode', 
     helper: 'clone', 
     zIndex: 100, 
     stop: function(event, ui) { 
      alert(ui.draggable); 
     } 
    }); 
    $('li.jQiNode').droppable({ 
     accept: '.jQiWhite, .jQiBlack' 
    }); 
});

В diffrences находится в JSON из Droppable. Я изменяю значение accept. Если бы вы принимали jQiNode, который был бы недоступным элементом. В accept вы должны сделать селектор перетаскиваемых элементов, которые можно отбросить там, а не отбрасываемых элементов.

Удачи, здесь вы можете попробовать: http://jsfiddle.net/VQfhW/

источник

2010-09-06 12:00:38 Diego

Эй, я узнал, что Draggable требуется следующий вызов (в пределах функции СТОП): $(ui.helper).clone(true).removeClass('ui-draggable ui-draggable-dragging').appendTo('ul#jQiBoard');

источник

2010-09-06 10:34:39

Ну, вы действительно должны подключить этот обработчик событий к объекту droppable, а не к draggable. Я сделал это изменение и различные другие изменения в этом jsfiddle, который я установил. Перейти посмотрим: http://jsfiddle.net/VQfhW/

источник

2010-09-06 10:36:05

Draggable был droppped и клонирует, но клон не перетаскиваемый

ответ

Смежные вопросы