Question

我有两张照片，一张照片，一张没照片。我想拖动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');

        }

        }

    );

  } );

问题是背景位置变化就像跳跃区域一样。我希望效果顺利。

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)
}

jquery模糊和unblur图像的一部分

1 个答案: