在JavaScript中计算窗口拖动和倾斜

我正在使用JavaScript并尝试在div上创建一个倾斜效果

首先，看一下这个视频：（0:40-0:60应该足够了）。当您移动窗口时，视频显示了一些很好的变换（倾斜）。我想做的是相同的事情：移动div时使其倾斜

目前我只有一个简单的div：

<div id="a" style="background: #0f0; position: absolute; left: 0px; top: 0px;"></div>

---

目前我的拖拽系统有缺陷而且简单。我需要更多关于我应该应用的逻辑的信息。

哇，这个想法很有说服力我已经清理了您的代码，并解决了初始化问题。现在它在Firefox和Chrome上运行良好（尽管你说不应该）

请注意：

• 在初始化过程中，您需要抓住起始

  顶部

  和

  左侧

  位置（getBoundingClientRect）
• 存储类似于

  this.dragData

  和

  element.style

  的引用，以缩短执行时间并加快执行速度

• dragData

  可以初始化为空对象。用javascript就可以了。您可以稍后添加属性

• 选项

  应该有条件地初始化为空对象，以便您可以接受零个选项

• moved

  和

  dragData。由于事件管理，发生的
  完全没有用处

• 为了在拖动过程中不选择文本，需要使用默认值
• 您可能希望跟踪

  z索引

  ，使其成为始终可见的活动元素

玩得开心

代码[]

/**
*可拖动的对象。
*/
Draggable=函数（targetElement，选项）{
this.targetElement=targetElement；
//我们可以选择零
选项=选项| |{}；
//初始化拖动数据。
//@props:startX，startY，lastX，lastY，
//offsetX，offsetY，上次，发生
this.dragData={}；
//设置光标样式。
targetElement.style.cursor='move'；
//要移动的元素。
var el=this.applyTo=options.applyTo | | targetElement；
//“鼠标向下”、“向上”和“移动”的事件方法。
//鼠标向上移动和移动绑定到窗口。
//我们可以根据需要附加和取消附加“移动”和“向上”事件。
var me=这个；
targetElement.addEventListener（'mousedown'，函数（事件）{
me.onMouseDown.call（我，事件）；
}，假）；
this.mouseUp=函数（事件）{
me.onMouseUp.call（我，事件）；
};
this.mouseMove=函数（事件）{
me.onMouseMove.call（我，事件）；
};
//初始化位置，以便
//即使在第一次拖动时也要平滑
var position=el.getBoundingClientRect（）；
el.style.left=位置.left+“px”；
el.style.top=位置.top+“px”；
el.style.position=“绝对”；
如果（el.style.zIndex>Draggable.zIndex）
Draggable.zindex=el.style.zindex+1；
};
Draggable.zindex=0；
/**
*设置倾斜并保存位置
*@param{Number}skew
*/
Draggable.prototype.setSkew=函数（倾斜）{
var data=this.dragData；
var style=this.applyTo.style；
//设置倾斜变换。
data.skew=skew；
style.MozTransform=skew？'skew（'+skew+'deg'）：；
style.webkitttransform=skew？'skew（'+skew+'deg'）：；
//保存新位置。
style.left=（data.lastX+data.offsetX）+'px'；
style.top=（data.lastY+data.offsetY）+'px'；
}
/**
*鼠标按下事件。
*@param{Object}事件
*/
Draggable.prototype.onMouseDown=函数（事件）{
var data=this.dragData；
//新的拖动事件。
var style=this.applyTo.style；
data.startX=data.lastX=event.clientX；
data.startY=data.lastY=event.clientY；
data.offsetX=parseInt（style.left，10）-event.clientX；
data.offsetY=parseInt（style.top，10）-event.clientY；
style.zIndex=Draggable.zIndex++；
data.lastTime=（新日期（））.getTime（）；
//鼠标向上移动事件。
window.addEventListener（'mousemove'，this.mousemove，false）；
window.addEventListener（'mouseup'，this.mouseup，false）；
event.preventDefault（）；//防止文本选择
};
/**
*鼠标移动事件。
*@param{Object}事件
*/
Draggable.prototype.onMouseMove=函数（事件）{
//他现在在拖我
var me=这个；
var data=me.dragData；
var元素=me.applyTo；
var clientX=event.clientX；
var clientY=event.clientY；
data.moving=true；
//倾斜动画。：）
var skew=（data.lastX-clientX）*1；
风险价值限额=25；
if（数学绝对值（倾斜）>极限）{
倾斜=极限*（倾斜>0？1:-1）；
}
var style=element.style；
var left=parseInt（style.left，10）；
var-top=parseInt（style.top，10）；
变量变换=
'translateX（+（clientX+data.offsetX-左）+'px）'+
'translateY（+（clientY+data.offsetY-top）+'px）'+
'倾斜（'+skew+'deg'）；
style.MozTransform=转换；
style.webkitttransform=转换；
data.lastX=clientX；
data.lastY=clientY；
data.lastTime=（新日期（））.getTime（）；
//这是按顺序排列的冷却部分
//不要停留在不正常的状态
var pre=偏斜>0？1:-1；
clearInterval（数据计时器）；
data.timer=setInterval（函数（）{
var skew=data.skew-（pre*10）；
倾斜=预*倾斜<0？0：倾斜；
me.setSkew（歪斜）；
if（data.moving | | skew==0）
clearInterval（数据计时器）；
}, 20);  
data.moving=false；
};
/**
*鼠标向上移动事件。
*@param{Object}事件
*/
Draggable.prototype.onMouseUp=函数（事件）{
这是一个小木桶（“”）；
//删除无用的事件。
window.removeEventListener（'mousemove'，this.mousemove，false）；
window.removeEventListener（'mousemove'，this.mouseUp，false）；
};

我认为这里应该用“超级”这个词。他要了一杯饮料，却得到了一口井！每个人都赢了。非常感谢，但是有一个错误。尝试快速移动红黑相间的窗口，然后

/**
 * The draggable object.
 */
Draggable = function(targetElement, options) {
    this.targetElement = targetElement;

    // Initialize drag data.
    this.dragData = {
        startX: null,
        startY: null,
        lastX: null,
        lastY: null,
        offsetX: null,
        offsetY: null,
        lastTime: null,
        occuring: false
    };

    // Set the cursor style.
    targetElement.style.cursor = 'move';

    // The element to move.
    this.applyTo = options.applyTo || targetElement;

    // Event methods for "mouse down", "up" and "move".
    // Mouse up and move are binded to window.
    // We can attach and deattach "move" and "up" events as needed.
    var me = this;

    targetElement.addEventListener('mousedown', function(event) {
        me.onMouseDown.call(me, event);
    }, false);

    this.mouseUp = function(event) {
        me.onMouseUp.call(me, event);
    };

    this.mouseMove = function(event) {
        me.onMouseMove.call(me, event);
    };
};

/**
 * The mouse down event.
 * @param {Object} event
 */
Draggable.prototype.onMouseDown = function(event) {
    // New drag event.
    if (this.dragData.occuring === false) {
        this.dragData.occuring = true;

        this.dragData.startX = this.dragData.lastX = event.clientX;
        this.dragData.startY = this.dragData.lastY = event.clientY;
        this.dragData.offsetX = parseInt(this.applyTo.style.left, 10) - event.clientX;
        this.dragData.offsetY = parseInt(this.applyTo.style.top, 10) - event.clientY;
        this.dragData.lastTime = (new Date()).getTime();

        // Mouse up and move events.
        var me = this;
        window.addEventListener('mousemove', this.mouseMove, false);
        window.addEventListener('mouseup', this.mouseUp, false);
    }
};

/**
 * The mouse movement event.
 * @param {Object} event
 */
Draggable.prototype.onMouseMove = function(event) {
    if (this.dragData.occuring === true) {
        // He is dragging me now, we move if there is need for that.
        var moved = (this.dragData.lastX !== event.clientX || this.dragData.lastY !== event.clientY);

        if (moved === true) {
            var element = this.applyTo;

            // The skew animation. :)
            var skew = (this.dragData.lastX - event.clientX) * 1;
            var limit = 25;
            if (Math.abs(skew) > limit) {
                skew = limit * (skew > 0 ? 1 : -1);
            }

            var transform = 'translateX(' + (event.clientX + this.dragData.offsetX - parseInt(element.style.left, 10)) + 'px)';
            transform += 'translateY(' + (event.clientY + this.dragData.offsetY - parseInt(element.style.top, 10)) + 'px)';
            transform += 'skew(' + skew + 'deg)';
            element.style.MozTransform = transform;
            element.style.webkitTransform = transform;

            this.dragData.lastX = event.clientX;
            this.dragData.lastY = event.clientY;

            this.dragData.lastTime = (new Date()).getTime();
        }
    }
};

/**
 * The mouse up event.
 * @param {Object} event
 */
Draggable.prototype.onMouseUp = function(event) {
    this.dragData.occuring = false;
    var element = this.applyTo;

    // Reset transformations.
    element.style.MozTransform = '';
    element.style.webkitTransform = '';

    // Save the new position.
    element.style.left = (this.dragData.lastX + this.dragData.offsetX) + 'px';
    element.style.top = (this.dragData.lastY + this.dragData.offsetY) + 'px';

    // Remove useless events.
    window.removeEventListener('mousemove', this.mouseMove, false);
    window.removeEventListener('mousemove', this.mouseUp, false);
};

/**
 * The draggable object.
 */
Draggable = function(targetElement, options) {
    this.targetElement = targetElement;

    // we can take zero options
    options = options || {};

    // Initialize drag data.

    // @props: startX, startY, lastX, lastY,
    // offsetX, offsetY, lastTime, occuring
    this.dragData = {};

    // Set the cursor style.
    targetElement.style.cursor = 'move';

    // The element to move.
    var el = this.applyTo = options.applyTo || targetElement;

    // Event methods for "mouse down", "up" and "move".
    // Mouse up and move are binded to window.
    // We can attach and deattach "move" and "up" events as needed.
    var me = this;

    targetElement.addEventListener('mousedown', function(event) {
        me.onMouseDown.call(me, event);
    }, false);

    this.mouseUp = function(event) {
        me.onMouseUp.call(me, event);
    };

    this.mouseMove = function(event) {
        me.onMouseMove.call(me, event);
    };

    // initialize position, so it will
    // be smooth even on the first drag
    var position  = el.getBoundingClientRect();
    el.style.left = position.left + "px";
    el.style.top  = position.top  + "px";
    el.style.position = "absolute";
    if (el.style.zIndex > Draggable.zindex)
      Draggable.zindex = el.style.zIndex + 1;
};

Draggable.zindex = 0;

/**
 * Sets the skew and saves the position
 * @param {Number} skew
 */
Draggable.prototype.setSkew = function(skew) {

    var data  = this.dragData;
    var style = this.applyTo.style;

    // Set skew transformations.
    data.skew = skew;
    style.MozTransform    = skew ? 'skew(' + skew + 'deg)' : '';
    style.webkitTransform = skew ? 'skew(' + skew + 'deg)' : '';

    // Save the new position.
    style.left = (data.lastX + data.offsetX) + 'px';
    style.top  = (data.lastY + data.offsetY) + 'px';
}

/**
 * The mouse down event.
 * @param {Object} event
 */
Draggable.prototype.onMouseDown = function(event) {

    var data = this.dragData;

    // New drag event.
    var style = this.applyTo.style;

    data.startX   = data.lastX = event.clientX;
    data.startY   = data.lastY = event.clientY;
    data.offsetX  = parseInt(style.left, 10) - event.clientX;
    data.offsetY  = parseInt(style.top,  10) - event.clientY;
    style.zIndex  = Draggable.zindex++;
    data.lastTime = (new Date()).getTime();

    // Mouse up and move events.
    window.addEventListener('mousemove', this.mouseMove, false);
    window.addEventListener('mouseup', this.mouseUp, false);
    event.preventDefault(); // prevent text selection
};

/**
 * The mouse movement event.
 * @param {Object} event
 */
Draggable.prototype.onMouseMove = function(event) {

    // He is dragging me now
    var me      = this;
    var data    = me.dragData;
    var element = me.applyTo;
    var clientX = event.clientX;
    var clientY = event.clientY;

    data.moving = true;

    // The skew animation. :)
    var skew  = (data.lastX - clientX) * 1;
    var limit = 25;

    if (Math.abs(skew) > limit) {
        skew = limit * (skew > 0 ? 1 : -1);
    }

    var style = element.style;
    var left  = parseInt(style.left, 10);
    var top   = parseInt(style.top,  10);

    var transform =
          'translateX(' + (clientX + data.offsetX - left) + 'px)' +
          'translateY(' + (clientY + data.offsetY - top)  + 'px)' +
          'skew(' + skew + 'deg)';

    style.MozTransform    = transform;
    style.webkitTransform = transform;

    data.lastX = clientX;
    data.lastY = clientY;

    data.lastTime = (new Date()).getTime();

    // here is the cooldown part in order
    // not to stay in disorted state
    var pre = skew > 0 ? 1 : -1;
    clearInterval(data.timer);
    data.timer = setInterval(function() {
      var skew = data.skew - (pre * 10);
      skew = pre * skew < 0 ? 0 : skew;
      me.setSkew(skew);
      if (data.moving || skew === 0)
        clearInterval(data.timer);
   }, 20);  
   data.moving = false;
};

/**
 * The mouse up event.
 * @param {Object} event
 */
Draggable.prototype.onMouseUp = function(event) {

    this.setSkew('');

    // Remove useless events.
    window.removeEventListener('mousemove', this.mouseMove, false);
    window.removeEventListener('mousemove', this.mouseUp, false);
};