Question

丢弃ui对象时遇到问题，首先设置我有可拖动的（暗物体）＆amp;第二集我有droppable（白色物体），请查看以下链接以了解我的查询，
令人惊讶的可拖动对象8正在降至8！但其余的物品都没有发生， PS：在悬停时，某些插槽正在重新定位，但可放置的功能适用于8，因此相信其他插槽可以放置！非常感谢您的帮助，

<body>
  <div id="NumsMain">
      <div id="numsPile"></div>
      <div id="numsSlot"></div>

      <div id="msgWhenTaskDone">
          <h3>You have successfully completed this task!</h3>
          <button onclick="restart()">Want to Play Again?</button>
      </div>
  </div>

https://jsfiddle.net/5cb6zktw/6/

有人可以帮我这个吗？

的问候，拉姆亚

Answer 1

问题在于这行代码：

$('<div>' + words[i-1] + '</div>').data('number', i).appendTo('#numsSlot').droppable({

正确的行是：

$('<div>' + words[i - 1] + '</div>').data('number', words[i - 1]).appendTo('#numsSlot').droppable({

＆＃34;令人惊讶的是，raggable对象8被降低到8＆＃34;：它取决于for循环的索引，它指定了不正确的值，但是如果你看到这个元素的位置则是8的正确值在你的阵列中。

正在运行的代码段：

＆＃13;

var droppedNums = 0;
$(restart);

function restart() {

  $('#msgWhenTaskDone').hide();
  $('#msgWhenTaskDone').css({
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  });

  droppedNums = 0;
  $('#numsPile').html('');
  $('#numsSlot').html('');

  var numbers = [1234, 99, 2000, 1111, 55, 19, 500, 8, 39, 77];
  numbers.sort(function () {
    return Math.random() - 0.5
  });

  for (var i = 0; i < 10; i++) {
    $('<div>' + numbers[i] + '</div>').data('number', numbers[i]).attr('id', 'card' + numbers[i]).appendTo('#numsPile').draggable({
      containment: '#NumsMain',
      stack: '#numsPile div',
      cursor: 'move',
      revert: true
    });
  }

  var words = ['1234', '99', '2000', '1111', '55', '19', '500', '8', '39', '77'];
  for (var i = 1; i <= 10; i++) {
    $('<div>' + words[i - 1] + '</div>').data('number', words[i - 1]).appendTo('#numsSlot').droppable({
      accept: '#numsPile div',
      hoverClass: 'hovered',
      drop: numsDropEventHandler
    });
  }
}

function numsDropEventHandler(event, ui) {
  var slotNum = $(this).data('number');
  var cardNum = ui.draggable.data('number');

  if (slotNum == cardNum) {
    ui.draggable.addClass('matching'); //addClass() is method;
    ui.draggable.draggable('disable');
    $(this).droppable('disable');
    ui.draggable.position({of: $(this), my: 'left top', at: 'left top'}); //position() is the method;
    ui.draggable.draggable('option', 'revert', false); //draggable() is the method & values passed in are arguments;
    droppedNums++;
  }

  if (droppedNums == 10) {
    $('#msgWhenTaskDone').show();
    $('#msgWhenTaskDone').animate({
      left: '380px',
      top: '280px',
      width: '400px',
      height: '100px',
      opacity: 1
    });
  }
}

＆＃13;

#msgWhenTaskDone h3 {
  font-family: 'Lucida Sans Unicode', sans-serif
}

#NumsMain {
  margin: 60px 80px;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  text-align: center
}

#numsPile {
  /*background: #ffd;*/
  height: 200px;
  width: 400px
}

#numsSlot {
  height: 250px;
  width: 400px;
}

#numsSlot div, #numsPile div {
  float: left;
  width: 60px;
  height: 60px;
  padding-top: 10px;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  margin: 0 0 0 10px;
  background: #fff;
  border-radius: 100%;
}

#numsSlot div:first-child, #numsPile div:first-child {
}

#numsSlot div.hovered {
  background: #aaa
}

#numsSlot div {
  border-style: dashed;
  font-size: 12px;
  margin-bottom: 10px;
}

#numsPile div {
  background: #666;
  color: #fff;
  font-size: 15px;
  /*text-shadow: 0 0 3px #000;*/
  box-shadow: 0 0 3px #000;
  margin-bottom: 10px
}

#numsPile div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 0.5 m rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 0.5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 0.5em rgba(0, 0, 0, .8)
}

#card1.matching {
  background: purple
}

#card2.matching {
  background: blue
}

#card3.matching {
  background: orange
}

#card4.matching {
  background: indigo
}

#card5.matching {
  background: red
}

#card6.matching {
  background: cyan
}

#card7.matching {
  background: violet
}

#card8.matching {
  background: green
}

#card9.matching {
  background: brown
}

#card10.matching {
  background: red
}

#msgWhenTaskDone {
  position: absolute;
  left: 580px;
  top: 250px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #dfd;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8); /*for firefox*/
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8); /*for safari & chrome*/
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px
}

＆＃13;

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>



<div id="NumsMain">
    <div id="numsPile"></div>
    <div id="numsSlot"></div>

    <div id="msgWhenTaskDone">
        <h3>You have successfully completed this task!</h3>
        <button onclick="restart()">Want to Play Again?</button>
    </div>
</div>

＆＃13;

使用jquery拖放

1 个答案: