0

動作するように見える次のコードがあります。

box.bind('mousedown' , function(event){
    box.css('background-color' , '#ff00ff');
    box.bind('mousemove' , movehandler);
});

function movehandler(event){
    box.css('background-color' , '#ffff00');
    // do things to move div            
}

しかし、次のことを試してパラメーターをmovehandler関数に渡すと、うまくいきません。

box.bind('mousedown' , function(event){
    box.css('background-color' , '#ff00ff');        
    startY = event.pageY;
    boxtop = box.position().top;
    box.bind('mousemove' , boxhandler(startY, boxtop));
}); 

function boxhandler(a, b) {
    box.css('background-color' , '#ffff00');
    dist = (event.pageY - a);
    var val = b + dist;
    box.css('WebkitTransform' , 'translate(0px, '+ val +'px)');
}

では、引数/パラメーターをハンドラー関数に渡して、実際のイベントに関連付けられた情報を保持することは可能ですか?

4

1 に答える 1

1

box.bind('mousemove'内部box.bind('mousedown'にあるように、mousedown が発生するたびに mousemove のバインドが行われることに注意してください。

次のようなものを試すことができます：

var startY = null;
var boxtop = null;
// Start moving
box.bind('mousedown' , function(event) {
  box.css('background-color' , '#ff00ff');        
  startY = event.pageY;
  boxtop = box.position().top;
});

// Finish moving
box.bind('mouseup', function() {
  startY = null;
  boxtop = null;
});

// Handle moving
box.bind('mousemove' , boxhandler);


function boxhandler(event) {
  if (startY !== null) {
    box.css('background-color' , '#ffff00');
    dist = (event.pageY - startY);
    var val = boxtop + dist;
    box.css('WebkitTransform' , 'translate(0px, '+ val +'px)');
  }
}
于 2013-10-05T23:06:57.090 に答える