• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

drag&drop dziwne zachowanie

VPS Starter Arubacloud
0 głosów
103 wizyt
pytanie zadane 5 lutego 2018 w JavaScript przez Kiele Obywatel (1,530 p.)

Na wstępie: nie, nie chcę używać jquery UI zależy mi na tym żeby funkcja była moja. Piszę funkcję przeciągania elementów ale przeciągany element dziwnie się zachowuje gdy wykonuje szybki ruch myszką. Kursor schodzi z elementu i się już nie przeciąga.

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="element"></div>
	</div>
	<script src="main.js"></script>
</body>
</html>
body{
	margin:0;
}

.container{
	width:250px;
	height: 250px;
	position: relative;
	display: grid;
	grid-template:100px/100px;
	border:solid 1px;
	top:100px;
	left:100px;
}

.element{
	background: red;
}

.element:hover{
	cursor:move;
}
$(document).ready(function(){
	(function(){
		var container,
		element,
		dragStart,
		drag,
		dragEnd,
		grabX,
		grabY,
		posX,
		posY;

		dragStart = (function(ev){
			element = $(this);
			container = $(this).parent();
			elPos = element.offset();
			cPos = container.offset();
			grabX = ev.clientX-elPos.left;
			grabY = ev.clientY-elPos.top;
		});

		drag = (function(ev){
			if(!element){
				return;
			}
			posX = (ev.clientX-grabX)-cPos.left;
			posY = (ev.clientY-grabY)-cPos.top;
			element.css({"transform":"translate("+posX+"px,"+posY+"px)"});
		});

		dragEnd = (function(){
			element = null;
			posX = null;
			posY = null;
		});

	$(".element").on("mousedown",dragStart);
	$(".element").on("mousemove",drag);
	$(".element").on("mouseup",dragEnd);

	}());
});

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 151 wizyt
+1 głos
1 odpowiedź 151 wizyt
pytanie zadane 28 sierpnia 2020 w JavaScript przez nowyklemens Początkujący (430 p.)
+1 głos
1 odpowiedź 240 wizyt
pytanie zadane 31 sierpnia 2020 w JavaScript przez nowyklemens Początkujący (430 p.)

92,843 zapytań

141,782 odpowiedzi

320,858 komentarzy

62,174 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...