|
Сообщение от tomberty
|
|
Еслиб я мог локализовать проблему,
|
давайте попробую за вас
карты User перетащить слева на синее поле и подождать.
вопрос чего не работает - то?
правьте как у вас на самом деле макет -- но не расширяйте без нужды, чтоб не утонуть в коде.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type='text/css'>.wrapper{margin:20px auto}
#User,#Comp,.game-field{border:solid 1px #555555;margin:10px;padding:20px;-moz-border-radius:5px;-webkit-border-radius:5px;float:left;height:335px;min-width:100px}
.ssComp,.ssUser{cursor:pointer;border:solid 1px #333333;font-weight:bold;margin:10px 0 5px 0;padding:10px;text-align:center;background:#eee;-moz-border-radius:3px;-webkit-border-radius:3px}
.game-field{padding:0px;width:335px;height:335px;background:#4169E1}
.ssComp{background:#EE82EE}
.game-field div{width:40px;height:40px;position:absolute}
p{margin:0;padding:0}
.game-field div.zip{margin:50px;padding:5px;width:160px;height:160px;background:#0FF}
</style>
<script type='text/javascript'>
$(window).load(function () {
$("#User .ssUser").draggable({
helper: "clone",
appendTo: "#trash"
});
function shuffle(o){
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
var cards = shuffle($.makeArray($('.ssComp')));
$("#Comp").append(cards)
$('.game-field').droppable({
activeClass: 'active-th',
hoverClass: 'hover-th',
drop: function(event, ui) {
$card = $(ui.draggable);
$(this).prepend($card);
var self = $(this);
var appendCard = function(arg) {
var y = $(arg).append(cards.shift()).find('img').css({
'border': '10px solid #FF0000',
'width': '150px',
'height': '150px'
}).animate({
'width': '100%',
'height': '100%'
});
var q = $(arg).droppable('disable');
return y, q; //кому столь странный return ?
}
setTimeout(function(){
appendCard.call(null, '[data-id='+(self.data('id')+1)+']')}, 2000);
}
});
});
</script>
</head>
<body>
<div class="wrapper">
<div id="User" class="">
<p>User</p>
<div class="ssUser ui-state-default">Блок 1</div>
<div class="ssUser ui-state-default">Блок 2</div>
<div class="ssUser ui-state-default">Блок 3</div>
<div class="ssUser ui-state-default">Блок 4</div>
<div class="ssUser ui-state-default">Блок 5</div>
<div class="ssUser ui-state-default">Блок 6</div>
</div>
<div id="trash" class="game-field" data-id="1"><div class="zip" data-id="2">сюда упадёт карта Comp</div></div>
<div id="Comp" class="">
<p>Comp</p>
<div class="ssComp ui-state-default">Блок 1</div>
<div class="ssComp ui-state-default">Блок 2</div>
<div class="ssComp ui-state-default">Блок 3</div>
<div class="ssComp ui-state-default">Блок 4</div>
<div class="ssComp ui-state-default">Блок 5</div>
<div class="ssComp ui-state-default">Блок 6</div>
</div>
</div>
</body>
</html>