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

Question

我正在使用 JavaScript 并尝试在 div 上产生倾斜效果。

首先，观看此视频：http://www.youtube.com/watch?v= ny5Uy81smpE（0:40-0:60 应该足够了）。该视频显示了移动窗口时的一些不错的变换（倾斜）。我想做的是同一件事：当我移动 div 时倾斜它。

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

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

我已经使用CSS3的transform属性完成了一个简单的倾斜转换，但是我的实现有问题。是否有好的教程或数学网站或资源来描述其背后的逻辑？如果我只知道逻辑和数学，我对 JavaScript 和 CSS 的了解足以实现。我尝试阅读 FreeWins 源代码，但我不好 。

我接受任何足智多谋的答案或伪代码 我的拖动系统是一个更大系统的一部分，因此，现在我发布了一些真实的代码，如果不给你整个系统，它就无法工作（我现在不能这样做）。因此，您无法按原样运行此代码。我使用的代码是这样的（尽管稍作修改）来演示我的想法：

/**
 * 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);
};

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

Answer 1

哇，这个想法震撼。 :) 我已经清理了你的代码，并解决了初始化问题。现在它在 Firefox 和 Chrome 上对我来说工作得很好（即使你说它不应该）。

一些注意事项：

• 您需要在初始化期间获取起始 top 和 left 位置 (getBoundingClientRect)
• 存储引用，例如 this.dragData< /code> 和 element.style
• 可以将 dragData 初始化为空对象，以实现简短和更快的执行。在 javascript 中没问题。您可以稍后添加属性。
• options 应有条件地初始化为空对象，以便您可以采用零个选项
• moved 和 dragData.occurring 由于该事件而完全无用 需要管理
• preventDefault 以便在拖动过程中不选择文本，
• 您可能希望跟踪 z-indexes 使其成为始终可见的活动元素

玩得开心！

代码 [查看实际操作]

/**
 * 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);
};