jquery计数器draggables（更多!!!） [英] jquery counter for draggables (even more!!!)
本文介绍了jquery计数器draggables（更多!!!）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要在下面的代码中进一步帮助CSS - 这是这篇文章的延续：
I need further help with the CSS in the following code -this is a continuation of this post:
以这样的方式计数桌布上的板数，如果你把一个板离开桌布，然后计数器下降。
So, the code below intends to count the number of plates on the tablecloth in such a way that if you put one plate away from the tablecloth, then the counter goes down.
代码或多或少起作用，但是，当您点击板来拖动它时，板跳到不同的位置。同样的情况发生，当你把桌子上的板子：而不是着陆，你想要它着陆，它土地其他地方...非常讨厌。
The code more or less works, however, when you click on a plate to drag it, the plate jumps to a different position. The same occurs when you drop the plate on the tablecloth: rather than landing where you want it to land, it lands somewhere else... Very annoying. Can anyone advice on how to smooth things out?
$(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>
您的帮助！
最好，
Thank you for your help! Best,
推荐答案
所以我找到了解决问题的方式使用原生HTML5的功能和ditching jQuery。该解决方案虽然不完美，但在拖动它们或将它们放在窗口的错误区域时解决了跳跃元素的问题。
So I have found a way around the problem using native HTML5's capabilities and ditching jQuery. The solution, although imperfect, solves the problem of "jumping" elements when dragging them or dropping them in the "wrong" area of the window.
总而言之：使用HTML5原生功能使相关元素可拖动/可拖放。然后使用document.getElementById（yourDivId）。childNodes.length
计算可放置区域中的孩子数。
在以下代码段中完成。
To sum up: use HTML5 native features to make the relevant elements draggable/droppable. Then use document.getElementById("yourDivId").childNodes.length to count the number of children in your droppable area. This is done in the following snippet.
//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>
这篇关于jquery计数器draggables（更多!!!）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
