javascript - draggables 的 jquery 计数器(甚至更多!!!)

Question

我需要以下代码中 CSS 的进一步帮助 - 这是这篇文章的延续:

jQuery: Counter for draggables (again!)

因此，下面的代码旨在计算 table 布上盘子的数量，如果您将一个盘子从 table 布上移开，则计数器会下降。

该代码或多或少有效，但是，当您单击一个盘子将其拖动时，该盘子会跳到不同的位置。当您将盘子放在 table 布上时也会发生同样的情况:它不是落在您希望它落在的地方，而是落在其他地方……非常烦人。谁能就如何解决问题提出建议？

$(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>

感谢您的帮助!最好的，

Answer 1

因此，我找到了一种使用原生 HTML5 功能并放弃 jQuery 来解决该问题的方法。该解决方案虽然不完美，但解决了将元素拖放到窗口“错误”区域时“跳跃”元素的问题。

总结一下:使用HTML5原生特性让相关元素可以拖放。然后使用 document.getElementById("yourDivId").childNodes.length计算可转换区域中的 child 数量。这是在以下代码段中完成的。

//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>