Как имитировать сопротивление с помощью перетаскиваемого jQueryUI? - PullRequest
15 голосов
/ 02 февраля 2012

Я ищу способ имитации сопротивления с помощью перетаскиваемого плагина jQueryUI (аналогично этот эффект ).В нижней части перетаскиваемой документации упоминается:

«Чтобы манипулировать положением перетаскиваемого объекта во время перетаскивания, вы можете использовать обертку в качестве перетаскиваемого помощника и расположить обернутый элемент с абсолютным позиционированием, илиВы можете исправить внутренние значения следующим образом: $ (this) .data ('draggable'). offset.click.top - = x ”.

Геометрия не является моей сильной стороной, я искал помощио том, как наилучшим образом добиться эффекта сопротивления при перетаскивании чего-либо.Я думал, что, используя этот совет выше, я могу изменить расстояние, на которое перемещается перетаскиваемый объект, используя геометрическую функцию.Я не уверен, что лучшим термином является сопротивление или эластичность, но я ищу ощущение, что элемент прикреплен к точке резиновой лентой или шнуром банджи, так что чем дальше вы тянете, тем меньше перемещается объект.

Например, скажем, я хочу перетащить объект на общее расстояние 500 пикселей (в любом направлении).Я бы хотел, чтобы эффект сопротивления увеличивался ближе к 500 пикселям от начальной точки, которую я получаю.Я огляделся и ничего подобного не видел.

Обновление :

Я создал базовый jsFiddle, который вычисляет расстояние, на которое элемент был перетащен http://jsfiddle.net/Z8m4B/

Расчет:

var x1=x2=y1=y2=0;
$("#draggable").draggable({
    start: function(e, ui) {
        y1 = ui.position.top;
        x1 = ui.position.left;
    },
    stop: function(e, ui) {
        y2 = ui.position.top;
        x2 = ui.position.left;        
        dist = parseInt(Math.sqrt(Math.pow((x2-x1),2)+Math.pow((y2-y1),2)), 10);
        console.log(dist);
    }
});

Очевидно, я хотел бы изменить расстояние во время события перетаскивания, а не на остановке.Кто-нибудь знает как работает функция создания этого сопротивления или растяжения?

Ответы [ 4 ]

16 голосов
/ 07 марта 2012

вы можете попробовать с этим http://jsfiddle.net/sAX4W/ с событием перетаскивания вы можете рассчитать расстояние и получить% от реального расстояния

var x1 = x2 = y1 = y2 = 0;
$("#draggable").draggable({
    revert: true,
    revertDuration: 100,
    axis: 'y',
    drag: function(e, ui) {
        y2 = ui.position.top;
        x2 = ui.position.left;
        dist = parseInt(Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2)), 10);
        ui.position.top = ui.position.top * (1 - (dist / 1000));
    },
    start: function(e, ui) {
        y1 = ui.position.top;
        x1 = ui.position.left;
    },
    stop: function(e, ui) {
    }
});​

редактировать

вы можете попробовать это с обеими осями http://jsfiddle.net/2QndJ/

var x1 = x2 = y1 = y2 = 0;
$("#draggable").draggable({
    revert: true,
    revertDuration: 100,

    drag: function(e, ui) {
        y2 = ui.position.top;
        x2 = ui.position.left;
        dist = parseInt(Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2)), 10);

        ui.position.top = ui.position.top * (1 - (dist / 1000));
        ui.position.left = ui.position.left * (1 - (dist / 1000));
    },
    start: function(e, ui) {
        y1 = ui.position.top;
        x1 = ui.position.left;
    },
    stop: function(e, ui) {
    }
});​
9 голосов
/ 02 марта 2012

Вот быстрый jsfiddle

В основном, он использует простую формулу 1 / (x+1).Это асимптотическая кривая, означающая, что y → 0 для x → infinity (для x >= 0).Таким образом, y всегда приближается к нулю, но никогда не достигает этого.

x в данном случае - это расстояние, на которое перетаскивается мышь, а y используется для масштабирования вектора перетаскивания.Таким образом, чем дальше перемещается мышь, тем меньше будет перемещаться перетаскиваемый элемент, поскольку y становится все ближе и ближе к нулю.

Поэтому, если мышь перетаскивают лишь немного, перетаскиваемый элемент в значительной степени удерживается.Но чем дальше вы перетаскиваете его, тем меньше оно будет следовать.

asymptote

Кстати, похоже, что пример, к которому вы привязаны, просто вдвое сокращает расстояние перемещения.Так что, если вы перетащите его на 100 пикселей, он переместится на 50 пикселей.Это более простое решение, но другое поведение, поскольку оно линейное.Мое решение состоит в том, чтобы сделать перетаскиваемое движение экспоненциально меньше, чем дальше вы (пытаетесь) перетащить его, так что это другой тип поведения.


jQuery

var halfDist = 150, // the mouse distance at which the mouse has moved
                    // twice as far as the draggable

centerX = 150,      // where to anchor the draggable
centerY = 150;

$("#draggable").draggable({
    drag: function(event, ui) {
        var x, y, dist, ratio, factor;
        x = ui.position.left - centerX;
        y = ui.position.top - centerY;
        dist = Math.sqrt(x*x + y*y);
        ratio = dist / halfDist
        factor = 1 / (ratio + 1);
        x *= factor;
        y *= factor;
        ui.position.left = x + centerX;
        ui.position.top  = y + centerY;
    }
});​

HTML

<div id="arena">
    <div id="draggable"/>
</div>​

CSS

#arena {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}

#draggable {
    width: 20px;
    height: 20px;
    background: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top:  -10px;
}

Благодаря j08691 за то, что вы взяли код из jsfiddle и разместили его здесь

3 голосов
/ 01 марта 2012
var x1=x2=y1=y2=0;
var maxdistance=1000;
var factor=2;
$(function() {
    $("#draggable").draggable({
        helper: function(){
            return $('<div></div>').css('opacity',0);
        },
        start: function(e, ui) {
            y1 = ui.position.top;
            x1 = ui.position.left;
        },
        stop: function(){
            var $this = $(this);
            $this.stop().animate({
                top: $this.data('starttop')
            },1000,'easeOutCirc');
        },
        drag: function(event, ui){
            y2 = ui.position.top;
            x2 = ui.position.left;        
            dist = parseInt(Math.sqrt(Math.pow((x2-x1),2)+Math.pow((y2-y1),2)), 10);
            ydist = (y2-y1);
            xdist = (x2-x1);
            $("#draggable").css("top", (y1+ydist*((maxdistance-ydist)/maxdistance)));
            $("#draggable").css("left", (x1+xdist*((maxdistance-xdist)/maxdistance)));
        }
    });
});​

http://jsfiddle.net/Lf5vc/

0 голосов
/ 30 июля 2015

Существует два способа: Вы можете получить левое значение элемента:

drag: function(event, ui ) {
  distance = $(element).css("left")
}

или вычислить его:

start: function( event , ui ) {
    globalX = event.clientX
},

drag: function( event, ui ) {
    distance = Math.abs(event.clientX - globalX);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...