jQuery ist eine beliebte JavaScript-Bibliothek, die das DOM einfach manipulieren kann, um Funktionen wie Drag & Drop mit der Maus zu erreichen. In diesem Artikel stellen wir detailliert vor, wie Sie mit jQuery die Mausziehfunktion implementieren.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div id="dragElement">这是一个可拖拽的元素。</div>
<style> #dragElement { width: 100px; height: 100px; background-color: yellow; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } </style>
$(function() { var isDragging = false; var currentX; var currentY; var initialX; var initialY; var xOffset = 0; var yOffset = 0; $('#dragElement').mousedown(function(e) { initialX = e.clientX - xOffset; initialY = e.clientY - yOffset; if (e.target === this) { isDragging = true; } }); $(document).mousemove(function(e) { if (isDragging) { e.preventDefault(); currentX = e.clientX - initialX; currentY = e.clientY - initialY; xOffset = currentX; yOffset = currentY; setTranslate(currentX, currentY, $('#dragElement')); } }); $(document).mouseup(function(e) { initialX = currentX; initialY = currentY; isDragging = false; }); function setTranslate(xPos, yPos, el) { el.css('transform', 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)'); } });
<style> #dragElement { cursor: move; } </style>
Funktion wendet eine Position auf ein Element an.
FazitsetTranslate
Das obige ist der detaillierte Inhalt vonJQuery-Maus-Drag-Implementierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!