1
Html:Почему этот перетаскиваемый компонент jquery не перетаскивается?
<html>
<head>
<meta charset="utf-8">
<title>Designing a Jigsaw Puzzle</title>
<link rel="stylesheet" href="../jquery-ui-1.11.4.custom/jquery-ui.min.css">
<style type="text/css">
body{
font-family:arial,verdana;
font-size:12px;
margin: 0 auto;
width: 900px;
}
div.container{
border: 1px solid #000;
float:left;
margin:0 auto;
padding:10px;
width: 100%;
}
#pieceBox{
border: 1px solid #000;
float: left;
height: 408px;
margin: 0 auto;
position:relative;
width: 408px;
}
#puzzleContainer
{
border: 1px solid #000;
float: right;
margin: 0 auto;
height: 408px;
width: 408px;
}
div.img{
background: url('http://i.imgur.com/u2Yxetg.jpg') no-repeat;
height:100px;
width:100px;
float:left;
border:1px solid #000;
}
ul{
text-align:center;
list-style:none;
margin:0;
padding:0;
}
span#message{
clear:both;
display: none;
font-size: 20px;
padding: 20px 0;
text-align: center;
width: 100%;
}
ul.buttons{
cursor:pointer;
margin-top:10px;
}
ul button{
border:1px solid #000;
font-weight:bold;
margin:0 auto;
padding:10px 0;
text-align:center;
width:175px;
display:inline-block;
}
#reset{
display:none;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="container">
<div id="pieceBox"></div>
<div id="puzzleContainer"></div>
<div class="clear"> </div>
<div class="clear"> </div>
<span id="message"></span>
<div class="clear"> </div>
<ul class="buttons">
<li><button id="start">Start</button></li>
<li><button id="reset">Reset</button></li>
</ul>
</div>
<script src="../jquery-ui-1.11.4.custom/jquery-2.2.0.min.js"></script>
<script src="../jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script src="js/puzzle.js" type="text/javascript"></script>
</body>
</html>
ЯШ:
var rows = 4;
var cols = 4;
$(document).ready(function(){
var sliceStr = createSlices(true);
$('#puzzleContainer').html(sliceStr);
handleStart();
});
function createSlices(useImage)
{
var str = '';
for(var i=0, top=0, c=0; i < rows; i++, top-=100)
{
for(var j=0, left=0; j<cols; j++, left-= 100, c++)
{
if(useImage)
{
str+= '<div style="background-position: ' + left + 'px ' + top +'px;" class="img" data-sequence="'+c+'">';
}
else
{
str+= '<div style="background-image:none;" class="img imgDroppable">';
}
str+= '</div>';
}
}
return str;
}
handleStart = function() {
$('#start').on('click', function()
{
var divs = $('#puzzleContainer > div');
var allDivs = shuffle(divs);
$('#pieceBox').empty();
allDivs.each(function(){
var leftDistance = Math.floor((Math.random()*280)) + 'px';
var topDistance = Math.floor((Math.random()*280)) + 'px';
$(this)
.addClass('imgDraggable')
.css({
position : 'absolute',
left : leftDistance,
top : topDistance
});
$('#pieceBox').append($(this));
});
var sliceStr = createSlices(false);
$('#puzzleContainer').html(sliceStr);
$(this).hide();
$('#reset').show();
});
addPuzzleEvents();
$('#reset').on('click', function()
{
var sliceStr = createSlices(true);
$('#puzzleContainer').html(sliceStr);
$('#pieceBox').empty();
$('#message').empty().hide();
$(this).hide();
$('#start').show();
});
}
function shuffle(o)
{
var tmp;
for(var i = 0; i < o.length; i++) {
tmp = o[i];
j = Math.floor(Math.random() * i)
o[i] = o[j];
o[j] = tmp;
}
return o;
};
function addPuzzleEvents()
{
$('.imgDraggable').draggable(
{
revert : 'invalid',
start : function(event, ui){
var $this = $(this);
if($this.hasClass('pieceDropped'))
{
$this.removeClass('pieceDropped');
($this.parent()).removeClass('piecePresent');
}
}
});
$('.imgDroppable').droppable({
hoverClass: "ui-state-highlight",
accept : function(draggable)
{
return !$(this).hasClass('piecePresent');
},
drop: function(event, ui) {
var draggable = ui.draggable;
var droppedOn = $(this);
droppedOn.addClass('piecePresent');
$(draggable).detach().addClass('pieceDropped').css({
top: 0,
left: 0,
position:'relative'
}).appendTo(droppedOn);
checkIfPuzzleComplete();
}
});
}
function checkIfPuzzleComplete()
{
if($('#puzzleContainer div.pieceDropped').length != 16)
{
return false;
}
for(var i = 0; i < 16; i++)
{
var puzzlePiece = $('#puzzleContainer div.pieceDropped:eq('+i+')');
var sequence = parseInt(puzzlePiece.data('sequence'), 10);
if(i != sequence)
{
$('#message').text('Nope! You made the kitty sad :(').show();
return false;
}
}
$('#message').text('YaY! Kitty is happy now :)').show();
return true;
}
Скриншот после удара старт:
Это выглядит хорошо, но кусочки головоломки не перетаскивать. Зачем?
пост этот код в jsFiddler – RBoschini