Question

你好我试图找到一种方法来获得可以在没有throwprops或livesnap的情况下使用Greensock的draggable的snap属性。我想当你放开＆＃39; .face＆＃39;它可以捕捉到最近的位置。它适用于生活劫掠，但我不想让它被锯齿状拖拽。

以下是我现在正在使用的内容：

    var droppables = $('.face');
    var choice = $('.choice');
    var gridWidth = 192;
    var gridHeight = 256;
    var overlapThreshold = '50%'; 

    function onDrop(dragged, dropped) {
      TweenMax.fromTo(dropped, 0.2, {opacity:1}, {opacity:0.5, repeat:1, yoyo:true});
    }

    Draggable.create(droppables, {
        type:'x,y',
        bounds:$('.content'),
        liveSnap:true,
        snap: {
            x: function(endValue) {
                return Math.round(endValue / gridWidth) * gridWidth;
            },
            y: function(endValue) {
                return Math.round(endValue / gridHeight) * gridHeight;
            }
        },
        onDrag: function(e) {
            var i = droppables.length;
            while (--i > -1) {
                if (this.hitTest(choice[i], overlapThreshold)) {
                    $(droppables[i]).addClass('highlight');
                } else {
                    $(droppables[i]).removeClass('highlight');
                }
            }
        },
        onDragEnd:function(e) {
            var i = droppables.length;
            while (--i > -1) {
                if (this.hitTest(choice[i], overlapThreshold)) {

                    onDrop(this.target, choice[i]);

                }
            }

任何帮助都会很棒。

Answer 1

您可以做的是更改onDragEnd回调中的条件逻辑，并删除与snap事件相关的所有内容。

Draggable.create(droppables, {
    type:'x,y',
    bounds:$('.content'),
    onDrag: function(e) {
        var i = droppables.length;
        for(var j = 0; j < i; j++) {
            if (this.hitTest(choice[j], overlapThreshold)) {
                $(droppables[j]).addClass('highlight');
            } else {
                $(droppables[j]).removeClass('highlight');
            }
        }
    },
    onDragEnd:function(e) {
        var i = droppables.length,
            snappedEl = false,
            originalOffset = $(this.target).offset();

        for(var j = 0; j < i; j++) {
            if (this.hitTest(choice[i], overlapThreshold)) {

                var targetOffset = $(choice[j]).offset();

                onDrop(this.target, choice[i]);

                snappedEl = true;

                $(this.target).addClass("snapped");

                TweenLite.to(this.target, 0.1,{
                  x:targetOffset.left-originalOffset.left,
                  y:targetOffset.top-originalOffset.top
                });
            }
        }
        if(!snappedEl) {
          TweenLite.to(this.target, 0.2, {x:0, y:0});
        }
      }
    }
  });

我在这里设置了一个实时样本：

http://codepen.io/rhernando/pen/e2502a90f4ed69fef0e1e7b8d9c17aae

此类问题对于用户直接访问GreenSock论坛来说要好得多，您将获得更快更正的答案。并不是说来这里找到答案有什么问题，但GreenSock论坛专门用于GSAP，你将得到包括引擎创建者在内的审核团队的官方支持。

干杯!!

Greensock - 在没有Throwprops的情况下对齐网格

1 个答案: