毎日jqueryプラグイン-ドラッグアンドドロップを試してください
ドラッグしてみてください
jqueryuiで私が以前最もよく使用したのはズームとドラッグです。ズームの問題は前回解決されましたが、今日、何か新しいものがドラッグの基本的な実装です。
効果は以下の通りです
コード部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>试一下拖拽</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
#div{
width: 100px;
height: 100px;
border: 1px solid lightgray;
position: fixed;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
<script>
$("#div").mousedown(function(e){
this.flag = true;
this.o = {
x:e.offsetX,y:e.offsetY};
}).mouseup(function(){
this.flag = false;
}).mousemove(function(e){
if(this.flag){
var c = {
x:e.clientX,y:e.clientY};
$(this).css({
'left':(c.x-this.o.x)+'px',
'top':(c.y-this.o.y)+'px'
})
}
})
</script>
アイデアの説明
- 実際、それはアクションの決定にすぎません。もちろん、フォームに基づいて直接座標を計算します。多くの場合、サブコンテナをコンテナにドラッグして移動するように求められることがありますが、原則はほとんどありません。悪いので、そうではありません。