Draggable has been droppped and cloned, but the clone isn't draggable
Bit of a cryptic title there, hopefully you can help :)
When I drag one of the Draggables, it clones itself but doesn't drop on the droppables :(开发者_开发百科
any ideas?
My code:
<!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>
I change your code to this:
$(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'
});
});
The diffrences is in the json of the droppable. I change de accept value. Befor you were accepting jQiNode wich was the droppable elements. In the accept you must make a selector of the draggable elements wich can be dropped there, not of the droppable elements.
Good Luck, here you can try it working: http://jsfiddle.net/VQfhW/
Well, you should really be attaching that event handler to the droppable object, instead of the draggable. I made that change, and various other changes to this jsfiddle I've set up. Go have a look: http://jsfiddle.net/VQfhW/
Hey, I found out that the Draggable needed the following call (within the STOP function):
$(ui.helper).clone(true).removeClass('ui-draggable ui-draggable-dragging').appendTo('ul#jQiBoard');
加载中,请稍侯......
精彩评论