拖放bug？

-3

<html> 
<head> 
<script type="text/javascript" src="js/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script> 
<script> 
$(function(){ 
var $container = $('#container'); 
$(".obj").draggable({ 
    cursor: 'move', 
    helper:'clone', 
    scope:'mydrag' 
    }); 
$container.droppable({ 
    accept: '.obj', 
    activeClass: 'myactive', 
    hoverClass: 'myhover', 
    scope:'mydrag', 
    drop: function(e,ui) { 

$("img").click(function() { 
$("#textfield").val($(this).attr("id")); 
}); 

$(ui.draggable).clone().appendTo($(this)).resizable().parent().draggable({containment: '#container'}); 
    } 
}); 
}); 
</script> 
<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" /> 

<style> 

#container { 
height: 98%; 
width: 50%; 
border: 3px solid #ccc; 
float: left; 
} 
#headlist { 
float: right; 
height: 20%; 
width: 48%; 
border: 1px solid #ccc; 
clear: none; 
} 

#hairlist { 
height: 20%; 
width: 48%; 
border: 1px solid #ccc; 
float: right; 
margin-top: 5px; 
} 
.myactive { 
opacity: 0.2; 
filter:alpha(opacity:20); 
} 
.myhover { 
border: 5px solid red; 
} 
#headlist img { 
cursor: move; 
} 
#hairlist img { 
cursor: move; 
} 
</style> 


</head> 
<body> 


<div id="container"> 
</div> 
<div id="headlist"> 

    img ... class="obj" id="a"/ 

    </div> 
<div id="hairlist"> 
    img... class="obj" id="c"/ 

</div> 
<input name="" type="text" id="textfield"> 

</body> 
</html>

運行上面的代碼拖放bug？

拖3 img元素

然後單擊克隆img元素

最後img元素沒有例如工作

對我拖累了3種圖片元素容器a-> b-> c然後單擊a和b是作品單擊c沒有工作

來源

2009-11-28 awelkije

此代碼無法讀取（前面有4個空格，以便將其放入代碼塊並突出顯示）。如果你認爲你已經發現了一個bug，你可能想用一個完整的例子（最好是補丁）將它報告給jQuery UI團隊。 – rfunduk 2009-11-28 05:01:53

試試這個：

var $container = $('#container'); 
    $container.droppable({ 
     accept: '.obj', 
     activeClass: 'myactive', 
     hoverClass: 'myhover', 
     scope:'mydrag', 
     drop: function(e,ui) { 
      $(ui.draggable).clone() 
       .appendTo($(this)) 
       .resizable() 
       .parent().draggable({containment: $container}); 
     } 
    }); 
    $(".obj").draggable({ 
     cursor: 'move', 
     helper: 'clone', 
     scope: 'mydrag' 
    }); 
    $("#container img").live('click',function() { 
     $("#textfield").val($(this).attr("id")); 
    });

通過使用實時點擊事件，您不必將其分配給您在容器中放置的每個新圖像。

來源

2009-11-29 02:39:19 PetersenDidIt

回答

相關問題