我需要在以下代码中进一步帮助CSS - 这是这篇文章的延续：
jQuery: Counter for draggables (again!)
所以，下面的代码打算计算桌布上的盘子数量，这样如果你把一个盘子放在桌布上，那么计数器会下降。
代码或多或少有效，但是，当你点击一个盘子拖动它时，盘子会跳到另一个位置。当你将盘子放在桌布上时也会出现同样的情况：而不是降落在你希望它降落的地方，而是落在其他地方......非常讨厌。 任何人都可以就如何解决问题提出建议吗？
$(init);
function init() {
var j = 0;
$("#counter").find("h1").html("You keep: " + j);
$(".fish").draggable({
addClasses: true,
refreshPositions: true,
//When you start dragging you append to body mainly to remove
// from cloth div
start: function(e, ui) {
ui.helper.appendTo('body');
},
//You move your out logic to stop. So if the element hasn't been added
// to cloth, it won't be counter
stop: function(e, ui) {
j = $(".cloth .fish").length;
j = j + 0;
$("#counter").find("h1").html("You keep: " + j);
}
});
$(".cloth").droppable({
accept: ".fish",
tolerance: "fit",
drop: function(event, ui) {
//On drop you append fish to the cloth div so it's counted
$('.cloth').append(ui.helper.css({
position: 'absolute',
top: ui.helper.offset().top,
left: ui.helper.offset().left
}));
j = $(".cloth .fish").length;
j = j + 0;
$("#counter").find("h1").html("You keep: " + j);
},
});
}.mybox {
width: 90%;
height: 10px;
position: absolute;
bottom: 10%;
margin-left: 5%;
text-align: center;
maring: auto;
background-color: orange;
}
#stop-top {
position: relative;
background-color: orange;
}
.fish {
margin: .5em;
font-size: 1.2em;
position: relative;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 50%;
width: 50px;
height: 50px;
background: #BAB6B2;
float: left;
border: .3em solid #4B027C;
}
.cloth {
width: 90%;
height: 210px;
border-radius: 15px;
border: 5% solid rgba(200, 0, 0, .5);
margin: 0 auto;
background-color: white;
background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 50%), linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 50%);
background-size: 20px 20px;
}
.ui-draggable-dragging {
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class='mybox' style='top:5%;height:70%;'>
<div id="counter" style="margin-left:5%;">
<h1>You keep: 0</h1>
</div>
<div class="cloth"></div>
<div class="fish" style="margin-left: 5%;"></div>
<div class="fish"></div>
<div class="fish"></div>
<div class="fish"></div>
<div class="fish"></div>
<div class="fish"></div>
</div>
<div class='mybox' style='height:20%; background-color:blue;'>
<button type="button" class="btn btn-primary " name="buttonSend">
<span class="glyphicon glyphicon-ok"></span> Ok
</button>
</div>
感谢您的帮助！ 最好，
答案 0 :(得分：0)
所以我找到了解决问题的方法，使用原生HTML5的功能并抛弃jQuery。该解决方案虽然不完善，但在拖动它们或将它们放入窗口的“错误”区域时解决了“跳跃”元素的问题。
总结：使用HTML5原生功能使相关元素可拖动/可拖放。然后使用document.getElementById（“yourDivId”）。childNodes.length 计算可放置区域中的孩子数量。 这在以下代码段中完成。
//global variable: number of tokens.
var j = 0;
function doFirst(){
//Set intial variables by ref. to objects in the page.
token1 = document.getElementById('token1');
token2 = document.getElementById('token2');
token3 = document.getElementById('token3');
token4 = document.getElementById('token4');
token5 = document.getElementById('token5');
token6 = document.getElementById('token6');
//as soon as you start to drag token, fire the user's startdrag.
token1.addEventListener("dragstart", startDrag, false);
token2.addEventListener("dragstart", startDrag, false);
token3.addEventListener("dragstart", startDrag, false);
token4.addEventListener("dragstart", startDrag, false);
token5.addEventListener("dragstart", startDrag, false);
token6.addEventListener("dragstart", startDrag, false);
//Reference tablecloth too.
tablecloth = document.getElementById('tablecloth');
// Here you need thre listeners
// 1. when something enters table cloth do this...
// this bit function(e){e.preventDefault();} overrides different browsers' default
// action.
tablecloth.addEventListener("dragenter",function(e){e.preventDefault();},false);
tablecloth.addEventListener("dragover",function(e){e.preventDefault();},false);
tablecloth.addEventListener("dragleave",leavecloth,false);
tablecloth.addEventListener("drop",dropped,false);
contador = document.getElementById('contador');
junk = document.getElementById('junk');
middleground.addEventListener("dragenter",function(e){e.preventDefault();},false);
middleground.addEventListener("dragover",function(e){e.preventDefault();},false);
middleground.addEventListener("dragleave",leavestart,false);
middleground.addEventListener("drop",droppedout,false);
}
function startDrag(e){
// stands for an event (something) than happens in your browser.
// whenever an event occurs the browser stores information about events,
// e.g. event of moving mouse -stores x-y position. We will have to stores
// infor with our drop/drag event.
e.dataTransfer.setData('Text', e.target.id);
}
function dropped(e){
e.preventDefault();
var data = e.dataTransfer.getData('Text');
e.target.appendChild(document.getElementById(data));
j = document.getElementById("tablecloth").childNodes.length;
contador.innerHTML = j;
}
function droppedout(e){
e.preventDefault();
var data = e.dataTransfer.getData('Text');
e.target.appendChild(document.getElementById(data));
j = document.getElementById("tablecloth").childNodes.length;
contador.innerHTML = j;
}
function leavecloth(e){
leftcloth = 1;
junk.innerHTML = 'left cloth' + leftstart+leftcloth;
}
function leavestart(e){
leftstart = 1;
junk.innerHTML = 'left start' + leftstart+leftcloth;
}
window.addEventListener("load", doFirst, false); //As soon page loads do this.mybox{
background-color: SkyBlue;
width: 100%;
height: 40%;
position: absolute;
bottom: 20%;
}
.myfooter{
background-color: Yellow;
width: 100%;
height: 20%;
position: absolute;
bottom: 0%;
}
.tablecloth {
width: 50%;
height:40%;
left: 25%;
position: absolute;
border-radius: 28px;
background-color:white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
background-size:20px 20px;
}
.fish {
margin:.5em;
font-size:1.2em;
position:relative;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-radius: 50%;
width: 50px;
height: 50px;
background: #BAB6B2;
float: left;
border:.3em solid #4B027C ;
}<!DOCTYPE html>
<html lang= "en">
<head>
<link rel = "stylesheet" href = "estilos.css">
<script src = "acciones.js"></script>
<head>
<body>
<div class = 'tablecloth' id = 'tablecloth'></div>
<div class = "mybox" id ='middleground'>
<div class = "fish" id = "token1" draggable="true"></div>
<div class = "fish" id = "token2" draggable="true"></div>
<div class = "fish" id = "token3" draggable="true"></div>
<div class = "fish" id = "token4" draggable="true"></div>
<div class = "fish" id = "token5" draggable="true"></div>
<div class = "fish" id = "token6" draggable="true"></div>
</div>
<div class = "myfooter">
<h1>
<div id = "contador">0</div><br>
</h1>
<h1>
<div id = "junk">nothingmuchs.</div><br>
</h1>
</div>
</body>
</html>