Greensock - Throwprops없이 그리드에 붙임

Question

안녕하세요 저는 Greensock의 draggable 스냅 속성을 throwprops 또는 livesnap 없이도 사용할 수있는 방법을 찾으려고합니다. 가장 가까운 지점에 맞추기 위해 '.face'를 놓아두면 좋겠다. 그것은 livesnap와 함께 작동하지만 나는 그것의 들쭉날쭉 한 드래그 싶지 않아요. 여기

내가 지금 함께 일하고 있어요 무엇 :

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 콜백에서 조건부 논리를 바꾸고 스냅 이벤트와 관련된 모든 것을 제거하는 것입니다.

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에 전념하고 있으며 엔진 작성자가 포함 된 조정 팀의 공식 지원을받을 것입니다.

건배 !!