![](/img/trans.png)
[英]How to cancel an HTML5 drag (and drop) operation using Javascript?
[英]the drag and drop operation in javascript
我知道如何在JavaScript中實現拖放效果,但我發現在某些站點中,拖放操作的速度會導致不同的結果。
以谷歌地圖為例,地圖視圖是可拖動的,當您慢慢拖動地圖時,地圖將隨您的鼠標移動,但是如果您快速拖動地圖然后放下鼠標,地圖將繼續移動(限制距離),似乎它有一個緩沖距離。
我想知道如何制作它?
不幸的是,沒有香草效果。
您將需要計算各種參數,例如完成拖動所需的距離,方向和時間。
然后根據結果,您可以計算貝塞爾曲線並擴展動畫,使其看起來無縫平滑。
這是一個例子...... http://jsfiddle.net/an44z/
它可以工作,如果可能不是那么好(匆忙寫一個舊項目,但它可能會讓你很好地了解正在發生的事情 - 應該發生)。
編輯:或者你可以研究這個mooTools的例子,因為它幾乎就是你所追求的。 http://mootools.net/demos/?demo=Drag.Scroll
聽起來你正在尋找某種“拖動速度”。 我今天早上花了一些時間把這個鼠標拋到一起的例子給你,所以我希望它有所幫助(我也有一些樂趣)。 *原則*對於您想要做的事情是相同的,並且您可以享受很多樂趣。
使用Javascript的Brunt:
// this is the easing I used in my "throwing" animation
// I use this to average out some of the arrays (distance & angle)
$.easing.easeOutCirc = function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
// stores the last drag spot, useful for calculating distances between points
var drag_last_spot;
// stores distances for use with calculating animation distance
var drag_distances;
// stores rads for use with calculating throw angle
var drag_rads;
// keeps the offset of the initial click to know where the mouse "went down" on the box
var drag_offset;
// keeps track of the "current target" since mouseUp and MouseMove are document level
var drag_target;
// keeps track of how long you held your mouse down on the box (to determine animation length)
var drag_time;
// taken via Google from http://jsfromhell.com/array/average
average = function(a){
var r = {mean: 0, variance: 0, deviation: 0}, t = a.length;
for(var m, s = 0, l = t; l--; s += a[l]);
for(m = r.mean = s / t, l = t, s = 0; l--; s += Math.pow(a[l] - m, 2));
return r.deviation = Math.sqrt(r.variance = s / t), r;
}
function onMouseDown(event) {
// offset and last_spot are the same for the first move iteration
drag_time = (new Date).getTime();
drag_offset = drag_last_spot = {
x: event.offsetX,
y: event.offsetY
};
// initialize or reset the distances and angle arrays
drag_distances = [];
drag_rads = [];
// because there are multiple boxes, we need to keep track of the target since our events are document level
drag_target = $(this);
$(document).bind("mousemove", onMouseMove);
$(document).bind("mouseup", onMouseUp);
}
function onMouseMove(event) {
// use pathagorean theorem for distance between two points (yay geometry!)
var dist = Math.sqrt(Math.pow(drag_last_spot.x - event.clientX, 2) + Math.pow(drag_last_spot.y - event.clientY, 2));
// push all the distances to this array for later use
drag_distances.push(dist);
// push all radians to this array for later use
var cur_rad = Math.atan2(event.clientY - drag_last_spot.y, event.clientX - drag_last_spot.x);
drag_rads.push(cur_rad);
// we need to know the last drag spot so we can calc the distance of the points during the next onMouseMove
drag_last_spot = {
x: event.clientX,
y: event.clientY
};
drag_target.css({left:event.clientX - drag_offset.x, top:event.clientY - drag_offset.y});
}
function onMouseUp(event) {
/* FYI wherever you see .slice(-N) you can change N to any number. I recommend a small number as a short drag will only have 5 or 10 items. A big number will average more of your "throw", but a small number is seemingly safer.*/
// this is the total duration of how long you dragged for
var duration = ((new Date).getTime() - drag_time);
// this is the distance of your drag (I times by three for a better animated effect)
var dist = average(drag_distances.slice(-3)).mean * 3;
// these help determine the direction of your throw (figures out the angle)
var rad = average(drag_rads.slice(-3)).mean - Math.PI / 2;
var to_left = event.clientX + Math.sin(rad) * -dist - drag_offset.x;
var to_top = event.clientY + Math.cos(rad) * dist - drag_offset.y;
// now to animation your throw!
drag_target.animate({left:to_left, top:to_top}, duration * 2, "easeOutCirc");
$(document).unbind("mousemove");
$(document).unbind("mouseup");
}
這個例子只是冰山一角,所以我說要亂用腳本來了解它是如何工作的,因為你可能會想出新的很酷的方法來做事。 祝好運!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.