Mam następujący problem: mam akapit z tekstem, który jest obrócony o 90 stopni i podpięte do niego jquery UI draggable, aby można go było przesuwać. Problem jest w tym, że jak klikam aby element przesunąć to przeskakuje, oraz nie da się go dociągnąć do lewej i prawej krawędzi rodzica.
jQuery 
- Rejestracja:ponad 18 lat
- Ostatnio:około 2 miesiące
- Lokalizacja:Rzeszów
0
Tak działają transformacje - obiekt jest rysowany w określonym położeniu, ale właściwości pozostają takie jak sprzed transformacji. Być może da się to ogarnąć przez getBoundingClientRect, ale to też musiałoby być ogarnięte przez bibliotekę do przesuwania. Spróbuj zastąpić jQ UI Draggable czymś innym.
- Rejestracja:prawie 10 lat
- Ostatnio:ponad 8 lat
- Postów:32
0
łap , wystarczy trochę zmodyfikować ;-)
HTML
<p>Przesuwaj element</p>
<div style="background: orange; width: 60px; height: 20px">
</div>
JS
var lastX; //zapamietuje ostatnia pozycję
var rect = document.querySelector("div");
rect.addEventListener("mousedown", function(event) {
if (event.which == 1) {
lastX = event.pageX;
addEventListener("mousemove", moved);
event.preventDefault();
}
});
function buttonPressed(event) {
if (event.buttons == null)
return event.which != 0;
else
return event.buttons != 0;
}
function moved(event) {
if (!buttonPressed(event)) {
removeEventListener("mousemove", moved);
} else {
var dist = event.pageX - lastX;
var newWidth = Math.max(10, rect.offsetWidth + dist);
rect.style.width = newWidth + "px";
lastX = event.pageX;
}
}
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.