jqueryぼかしと画像の一部を外す

Question

私は2つの写真をbluredと1つは持っていません。私はdivをぼかしのない部分を見るためにドラッグしたいと思う。私はここに例があります：https://jsfiddle.net/78knkqw2/2/

$(function() { 
    $("#draggable").draggable(   
    { 
     containment: "parent", 
     cursor: "move", 
     cursorAt: { top: 150, left: 100 }, 

     drag: function(){ 
      var position_top = $(this).position().top ; 
      var position_left = $(this).position().left; 


     console.log("top:"+position_top+" left:"+position_left); 

      if(position_top<=0) 
       position_top = position_top; 
      else 
       position_top = '-'+position_top; 

      if(position_left<=0) 
       position_left = position_left; 
      else 
       position_left = '-'+position_left; 

       $(this).css('background-position', position_left+'px '+position_top+'px'); 

     }, 

     stop: function(event, ui) { 
      var position_top = $(this).position().top ; 
      var position_left = $(this).position().left; 

     console.log("top:"+position_top+" left:"+position_left); 

      if(position_top<=0) 
       position_top = position_top; 
      else 
       position_top = '-'+position_top; 

      if(position_left<=0) 
       position_left = position_left; 
      else 
       position_left = '-'+position_left; 

       $(this).css('background-position', position_left+'px '+position_top+'px'); 

     } 

     } 

    ); 

    }); 

問題が背景postionの変更がエリアをジャンプするようです。 効果を滑らかにしたい。

Answer 1

JQueryのドラッグコールバックがわずかに遅れているため、ジャンプしています。 常にこのような機能を自分で実装しようとします。

var draggable = $("#draggable") 

draggable.mousedown(startDrag) 

var drag_mouseX 
var drag_mouseY 
var drag_elementX 
var drag_elementY 

function startDrag(e){ 
    //remember current mouse position 
    drag_mouseX = e.clientX 
    drag_mouseY = e.clientY 

    //remember current element position 
    var pos = draggable.position() 
    drag_elementX = pos.left 
    drag_elementY = pos.top 

    // add mousemove and stop listener 
    $(document).on('mousemove',dragMove) 
    $(document).on('mouseup',stopDrag) 
} 

function dragMove(e){ 
    // subtract initial mouse position from current mouse position and add the elements initial position 
    var posX = e.clientX - drag_mouseX + drag_elementX 
    var posY = e.clientY - drag_mouseY + drag_elementY 
    var bgPos = (-posX)+'px '+(-posY)+'px' 
    draggable.css({top:posY,left:posX,backgroundPosition:bgPos}) 
} 

function stopDrag(){ 
// remove listeners -> stop dragging 
    $(document).off('mousemove',dragMove) 
    $(document).off('mouseup',stopDrag) 
}