可拖動已droppped和克隆，但克隆也不能拖動

位一個神祕的稱號出現的，希望你能幫助:)可拖動已droppped和克隆，但克隆也不能拖動

當我拖拖拽元素之一，它克隆本身，而是不降在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。我改變了de接受價值。 Befor你正在接受jQiNode，這是可投入的元素。在接受中，您必須創建可拖放元素的選擇器，而不是可拖放元素。

祝你好運，在這裏你可以嘗試它的工作：http://jsfiddle.net/VQfhW/

來源

2010-09-06 12:00:38 Diego

嘿，我發現了可拖動需要以下調用（停止功能內）： $(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

可拖動已droppped和克隆，但克隆也不能拖動

回答

相關問題