Question

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
	<title>Drag & hhkhhDrop </title>
	  <link rel="stylesheet" type="text/css" href="./Style.css" />


	
</head>


<body>

<h3>Moving words around to make a sentence</h3>
<div id="answerDiv">
	
	    <div class="dragDropSmallBox" class="destinationBox"   id="a6">Page</div>
		<div class="dragDropSmallBox" class="destinationBox"   id="a1">THIS</div>
		<div class="dragDropSmallBox" class="destinationBox"   id="a5">Web</div>
		<div class="dragDropSmallBox" class="destinationBox"   id="a2">Is</div>
		<div class="dragDropSmallBox" class="destinationBox"   id="a4">Nice</div>
		<div class="dragDropSmallBox" class="destinationBox"   id="a3">A</div>
		
		
	</div>

<div style="padding-top:280px;">
	<div id="questionDiv">
		
		<div class="mover" class="dragDropSmallBox" id="q1">1</div>
		<div class="destinationBox"></div>
		<div class="mover" class="dragDropSmallBox" id="q2">2</div>
		<div class="destinationBox"></div>
		<div class="mover" class="dragDropSmallBox" id="q3">3</div>
		<div class="destinationBox"></div>
		<div class="mover" class="dragDropSmallBox" id="q4">4</div>
		<div class="destinationBox"></div>
		<div class="mover" class="dragDropSmallBox" id="q5">5</div>
		<div class="destinationBox"></div>
		<div class="mover" class="dragDropSmallBox" id="q6">6</div>
		<div class="destinationBox"></div>
		
	
	
	</div>

	
	
	</div>
	
<div id="dragContent"></div>
<input type="button" onclick="dragDropResetForm();return false"  class="reset" value="Reset">
</body>
</html>

＆＃13;

我已经为页面中的元素设置了拖放功能，但是我想通过单独的单击来拖放元素，这意味着我想要单击鼠标来拖动元素并再次点击把它放在它想要掉落的地方。有什么帮助吗？

Answer 1

JQueryUI有一个很好的内置方法叫做draggable。它允许您拖动和移动页面上的不同元素。

在此处详细了解：https://jqueryui.com/draggable/

Answer 2

您可以尝试这种简单而优雅的解决方案。在这里，你必须进行额外的点击以删除元素。

var dragContentDiv = document.getElementById('dragContent');

// Disable browser's drag and drop functionality
dragContentDiv.ondragstart = function() {
  return false;
};

// Watch the mouse button press
dragContentDiv.onmousedown = function(e) {
  // Move the selected element to absolute coordinates
  dragContentDiv.style.position = 'absolute';
  moveAt(e);
  // If needed, move element to the body, so it's not inside of position:relative block
  document.body.appendChild(dragContentDiv);

  // Show dragContentDiv above all other elements
  dragContentDiv.style.zIndex = 1000; // показывать мяч над другими элементами

  // Move element horisontally under cursor coordinates
  // and move it halfway of it's width to make it centered
  function moveAt(e) {
    dragContentDiv.style.left = e.pageX - dragContentDiv.offsetWidth / 2 + 'px';
  }

  // Move it around the screen
  document.onmousemove = function(e) {
    moveAt(e);
  }

  // Watch the end of a process
  dragContentDiv.onmouseup = function() {
    document.onmousemove = null;
    dragContentDiv.onmouseup = null;
  }
}

如何用鼠标拖动n下降？

2 个答案: