將元素移動到手指下，然後以相同的動作拖動元素

在touchstart和鼠標按下時，我想將元素移動到我的手指或光標下，然後能夠拖動它。將元素移動到手指下，然後以相同的動作拖動元素

JS：

$('.matiMarker').draggable(); 
$('.matiValMarker').bind("mousedown touchstart",function(e){ 

    var that = this, 
    $(this).parent().find('.matiMarker').animate({ 
     left : $(that).position().left + "px" 
    },100); 
});

這樣將移動.matiMarker下我的手指/光標，我需要的發生是有同樣的鼠標按下/ touchstart事件是累贅的開始。我失去了如何做到這一點。

來源

2014-05-14 alanj

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Drag your element along mouse click start and end.</title> 
<style type="text/css"><!-- 
#dg { 
width:180px; 
height:100px; 
margin:8px; 
background:#a7daa8; 
cursor:pointer; 
} 
--></style> 
<script type="text/javascript" src="jquery_1.6.1.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script> 
<script type="text/javascript"><!-- 
//This variables stores your element's x and y position. 
var xpos; var ypos; 
//This method runs when your page is load. 
$(document).ready(function() { 
    $('#matiMarker').draggable({ 
    // get the initial X and Y position when dragging starts 
    start: function(event, ui) { 
     xpos = ui.position.left; 
     ypos = ui.position.top; 
    }, 
    // when dragging stops 
    stop: function(event, ui) { 
     // your draggable element's current position. 
     var xmove = ui.position.left; 
     var ymove = ui.position.top; 
    } 
    }); 
}); 
--></script> 
</head> 
<body> 
<div id="matiMarker">Click and Drag<br /> 
Your element which has matiMarker id. </div> 
</body> 
</html>

這樣你就可以在同一個函數（啓動和停止函數）上拖動和移動動作。

來源

2015-04-30 08:14:43

將元素移動到手指下，然後以相同的動作拖動元素

回答

相關問題