Question

HTML：

<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">&nbsp;</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>

js：

    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;
    }

点击开始后的

屏幕截图：

它看起来很好，但拼图不可拖动。为什么呢？

Answer 1

在addPuzzleEvents();函数中添加$('#start').on('click')：

 $('#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();

  });

为什么这个可拖动的jquery组件不可拖动？

1 个答案: