다음과 같이 jQuery UI를 사용하기 전에 요소를 직선 경로에서 드래그 할 수 있고 축에 고정했습니다.
$('#element').draggable({
axis:'y'
});
그러나 본질적으로 드래그 가능한 선인 특정 경로를 따라 가면서 요소를 드래그 할 수있게 만드는 방법이 궁금합니다.
기본적으로 시작 부분에 요소의 스타일 / 위치가 하나 있고 끝 위치의 다른 스타일 / 위치가 있으며이 두 위치 사이의 경로를 따라 드래그 할 수 있기를 원합니다.
javascript 또는 jQuery로 어떻게 할 수 있습니까?
나는 jQuery가 그런 종류의 기능을 제공한다고 생각하지 않는다. 그러나 순수한 자바 스크립트로 할 수도 있고 내가 만든이 플러그인을 사용할 수도 있습니다.
$.fn.dragBetween = function(eles) {
var dragEle = this,
md = false, offset, a, b, ab;
eles[0] = $(eles[0])[0];
eles[1] = $(eles[1])[0];
dragEle.on("mousedown", function(e) {
if (e.which == 1) {
mD = true;
offset = new Vector(
e.clientX - this.offsetLeft,
e.clientY - this.offsetTop
);
a = new Vector(eles[0].offsetLeft, eles[0].offsetTop);
b = new Vector(eles[1].offsetLeft, eles[1].offsetTop);
ab = b.sub(a);
}
});
$(window).on("mousemove", function(e) {
if (!mD) return false;
var cursor = new Vector(e.clientX, e.clientY).sub(offset).sub(a),
mag = cursor.dot(ab) / ab.dot(ab),
proj = ab.times(Math.max(0, Math.min(1, mag)));
var final = proj.add(a);
dragEle.css({
top: final._arr[1],
left: final._arr[0]
});
e.preventDefault();
}).mouseup(function() {
mD = false;
});
};
그리고 이것은 Vector
내가 서둘러 쓴 수업입니다.
function Vector(x, y) {
this._arr = [x, y];
}
Vector.prototype.dot = function(v2) {
var v1 = this;
return v1._arr[0] * v2._arr[0] + v1._arr[1] * v2._arr[1];
}
Vector.prototype.add = function(v2) {
var v1 = this;
return new Vector(v1._arr[0] + v2._arr[0], v1._arr[1] + v2._arr[1]);
}
Vector.prototype.sub = function(v2) {
var v1 = this;
return new Vector(v1._arr[0] - v2._arr[0], v1._arr[1] - v2._arr[1]);
}
Vector.prototype.times = function(n) {
var v = this;
return new Vector(v._arr[0] * n, v._arr[1] * n);
}
호출하려면 다음을 수행하십시오.
$("#drag").dragBetween(["#a", "#b"]);
데모 : http://jsfiddle.net/DerekL/0j6e60d8/
공식 설명은 https://www.desmos.com/calculator/tpegbbk8gt를 참조하십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다