Question

我的代码有问题：它应该从右到左具有draggabillity，并且应该在左侧排序。到现在为止还挺好。但我遇到一个错误：当我从左侧div中拖动项目时，另一个克隆出现在屏幕上，我无法弄明白。我还需要帮助从右边添加多个项目，并使用计数器显示相同项目的编号。这是我的代码：

＆＃13;

$(function drag() {
  $(".item").draggable({
    cursor: 'move',
    helper: 'clone',
    appendTo: '#droppable',
  });
});

$(function drop() {
  $("#droppable").droppable({
    accept: '.item',
    drop: function(event, ui) {
      ui.draggable.clone().appendTo($(this));
    }
  });
  $("#droppable").sortable({
    helper: "clone"
  });
  $("#droppable").disableSelection();
});

＆＃13;

#draggable {
  width: 150px;
  height: 600px;
  border: 1px black hidden;
  float: right;
}

.item {
  width: 70px;
  height: 100px;
  border-radius: 10%;
  margin: auto;
  margin-top: 11.5%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.black {
  background-color: black;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

#droppable {
  width: 150px;
  height: 600px;
  border: 1px black solid;
  float: left;
}

#div_1 {
  background-color: red;
}

#div_2 {
  background-color: blue;
}

#div_3 {
  background-color: black;
}

#div_4 {
  background-color: green;
}

#div_5 {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

<body>
  <div id="draggable">
    <div id="div_1" class="item red" draggable="true">1</div>
    <div id="div_2" class="item blue" draggable="true">2</div>
    <div id="div_3" class="item black" draggable="true">3</div>
    <div id="div_4" class="item green" draggable="true">4</div>
    <div id="div_5" class="item yellow" draggable="true">5</div>
  </div>
  <div id="droppable" ondrop="drop(event)">
  </div>

</body>

＆＃13;

Answer 1

您可以使用解决方案https://jsfiddle.net/0nf83chm/1/

＆＃13;

	$( ".item" ).draggable({
    cursor:'move',
    helper:'clone',
    appendTo:'#droppable',
	});


	$("#droppable").droppable({
    accept: '.item',
    drop:function (event, ui) {
      ui.draggable.clone().appendTo($(this));
      }
  });
  $("#droppable").sortable({helper: "clone"});
  $("#droppable").disableSelection();

＆＃13;

#draggable{width:150px; height:600px; border:1px black hidden; float:right;}
.item{width:70px; height:100px; border-radius:10%; margin:auto; margin-top:11.5%;}
.red{background-color:red;}
.blue{background-color:blue;}
.black{background-color:black;}
.green{background-color:green;}
.yellow{background-color:yellow;}
#droppable{width:150px; height:600px; border:1px black solid; float:left;}
#div_1{background-color:red;}
#div_2{background-color:blue;}
#div_3{background-color:black;}
#div_4{background-color:green;}
#div_5{background-color:yellow;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="draggable">
  <div id="div_1" class="item red" draggable="true">1</div>
  <div id="div_2" class="item blue" draggable="true">2</div>
  <div id="div_3" class="item black" draggable="true">3</div>
  <div id="div_4" class="item green" draggable="true">4</div>
  <div id="div_5" class="item yellow" draggable="true">5</div>
</div>
<div id="droppable" ></div>

＆＃13;

jquery拖放错误

1 个答案: