jQueryは単純なドラッグ効果を実装します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQueryは単純なドラッグ効果を実装します

小云云

Jan 04, 2018 pm 02:18 PM

jquery 効果

この記事では、jQuery を使用して簡単なドラッグ効果を実現するための関連情報を主に紹介します。私は、個人的に、これが非常に優れたユーザーエクスペリエンスであると考えました。参考までに、編集者をフォローして詳細な紹介を見てみましょう。

前書き

この記事では主に jQuery を使用した簡単なドラッグエフェクトを紹介し、参考と学習のために共有します。以下では多くを述べません。詳細な紹介を見てみましょう。

質問する

あるボックスから別のボックスに要素をプルするにはどうすればよいですか?

実装アイデア

この操作に含まれるイベントは、mousedown、mousemove、mouseup の 3 つのイベントを監視し、対応する操作を実行します。
操作設計のノードは、元のノード、一時ノード、新しいノードです
ノードの移動にはイベントの座標が関係します
操作要素はJQUERYを使用して実装されます

該当するコメントは記事内に反映されておりますので、よく読んでいただければご理解いただけます。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>拖拽</title>
 <style>
 .container ul{
 width: 350px;
 padding: 15px;
 min-height:300px;
 background-color:#FFFFF0;
 margin:20px;
 display: inline-block;
 border-radius: 5px;
 border: 1px solid #bbb;
 }
 .container ul li{
 display: block;
 float: left;
 width: 350px;
 height: 35px;
 line-height: 35px;
 border-radius: 4px;
 margin: 0;
 padding: 0;
 list-style: none;
 background-color:#EED2EE;
 margin-bottom:10px;
 -moz-user-select: none;
 user-select: none;
 text-indent: 10px;
 color: #555;
}
</style>
</head>
<body>


 <p class="container">

 <ul>
 <li>A</li>
 <li>B</li>
 <li>C</li>
 <li>e</li>
 <li>f</li>
 <li>g</li>
 </ul>

 <ul></ul>

 <ul></ul>

</p>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<!-- <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> -->
<script type="text/javascript">

 $(function(){
 //出入允许拖拽节点的父容器，一般是ul外层的容器
 drag.init('container');
 });

//拖拽
var drag = {

 class_name : null, //允许放置的容器
 permitDrag : false, //是否允许移动标识

 _x : 0,    //节点x坐标
 _y : 0,     //节点y坐标
 _left : 0,   //光标与节点坐标的距离
 _top : 0,   //光标与节点坐标的距离

 old_elm : null,  //拖拽原节点
 tmp_elm : null,  //跟随光标移动的临时节点
 new_elm : null,  //拖拽完成后添加的新节点

 //初始化
 init : function (className){

  //允许拖拽节点的父容器的classname(可按照需要，修改为id或其他)
  drag.class_name = className;

  //监听鼠标按下事件，动态绑定要拖拽的节点（因为节点可能是动态添加的）
  $('.' + drag.class_name).on('mousedown', 'ul li', function(event){
   //当在允许拖拽的节点上监听到点击事件，将标识设置为可以拖拽
   drag.permitDrag = true;
   //获取到拖拽的原节点对象
   drag.old_elm = $(this);
   //执行开始拖拽的操作
   drag.mousedown(event);
   return false;
  });

  //监听鼠标移动
  $(document).mousemove(function(event){
   //判断拖拽标识是否为允许，否则不进行操作
   if(!drag.permitDrag) return false;
   //执行移动的操作
   drag.mousemove(event);
   return false;
  });

  //监听鼠标放开
  $(document).mouseup(function(event){
  //判断拖拽标识是否为允许，否则不进行操作
  if(!drag.permitDrag) return false;
  //拖拽结束后恢复标识到初始状态
  drag.permitDrag = false;
  //执行拖拽结束后的操作
  drag.mouseup(event);
  return false;
  });
 },

 //按下鼠标 执行的操作
 mousedown : function (event){

 //1.克隆临时节点，跟随鼠标进行移动
 drag.tmp_elm = $(drag.old_elm).clone();

 //2.计算 节点 和 光标 的坐标
 drag._x = $(drag.old_elm).offset().left;
 drag._y = $(drag.old_elm).offset().top;

 var e = event || window.event;
 drag._left = e.pageX - drag._x;
 drag._top = e.pageY - drag._y;

 //3.修改克隆节点的坐标，实现跟随鼠标进行移动的效果
 $(drag.tmp_elm).css({
  'position' : 'absolute',
  'background-color' : '#FF8C69',
  'left' : drag._x,
  'top' : drag._y,
 });

 //4.添加临时节点
 tmp = $(drag.old_elm).parent().append(drag.tmp_elm);
 drag.tmp_elm = $(tmp).find(drag.tmp_elm);
 $(drag.tmp_elm).css('cursor', 'move');

 },

 //移动鼠标 执行的操作
 mousemove : function (event){

 //2.计算坐标
 var e = event || window.event;
 var x = e.pageX - drag._left;
 var y = e.pageY - drag._top;
 var maxL = $(document).width() - $(drag.old_elm).outerWidth();
 var maxT = $(document).height() - $(drag.old_elm).outerHeight();
 //不允许超出浏览器范围
 x = x < 0 ? 0: x;
 x = x > maxL ? maxL: x;
 y = y < 0 ? 0: y;
 y = y > maxT ? maxT: y;

 //3.修改克隆节点的坐标
 $(drag.tmp_elm).css({
  'left' : x,
  'top' : y,
 });

 //判断当前容器是否允许放置节点
 $.each($('.' + drag.class_name + ' ul'), function(index, value){

  //获取容器的坐标范围 (区域)
  var box_x = $(value).offset().left;  //容器左上角x坐标
  var box_y = $(value).offset().top;  //容器左上角y坐标
  var box_width = $(value).outerWidth(); //容器宽
  var box_height = $(value).outerHeight();//容器高

  //给可以放置的容器加背景色
  if(e.pageX > box_x && e.pageX < box_x+box_width && e.pageY > box_y && e.pageY < box_y+box_height){

   //判断是否不在原来的容器下（使用坐标进行判断：x、y任意一个坐标不等于原坐标，则表示不是原来的容器）
   if($(value).offset().left !== drag.old_elm.parent().offset().left 
    || $(value).offset().top !== drag.old_elm.parent().offset().top){

    $(value).css(&#39;background-color&#39;, &#39;#FFEFD5&#39;);
   }
  }else{
   //恢复容器原背景色
   $(value).css(&#39;background-color&#39;, &#39;#FFFFF0&#39;);
  }

  });

 },

 //放开鼠标 执行的操作
 mouseup : function (event){
 //移除临时节点
 $(drag.tmp_elm).remove();

 //判断所在区域是否允许放置节点
 var e = event || window.event;

 $.each($(&#39;.&#39; + drag.class_name + &#39; ul&#39;), function(index, value){

  //获取容器的坐标范围 (区域)
  var box_x = $(value).offset().left;  //容器左上角x坐标
  var box_y = $(value).offset().top;  //容器左上角y坐标
  var box_width = $(value).outerWidth(); //容器宽
  var box_height = $(value).outerHeight();//容器高

  //判断放开鼠标位置是否想允许放置的容器范围内
  if(e.pageX > box_x && e.pageX < box_x-0+box_width && e.pageY > box_y && e.pageY < box_y-0+box_height){

   //判断是否不在原来的容器下（使用坐标进行判断：x、y任意一个坐标不等于原坐标，则表示不是原来的容器）
   if($(value).offset().left !== drag.old_elm.parent().offset().left 
    || $(value).offset().top !== drag.old_elm.parent().offset().top){
    //向目标容器添加节点并删除原节点
    tmp = $(drag.old_elm).clone();
    var newObj = $(value).append(tmp);
    $(drag.old_elm).remove();
    //获取新添加节点的对象
    drag.new_elm = $(newObj).find(tmp);
    }
   }
  //恢复容器原背景色
  $(value).css('background-color', '#FFFFF0');
  });

 },

 };

 </script>

</body>
</html>

ログイン後にコピー

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7470

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い画面の問題が発生する Apr 03, 2024 am 08:13 AM

スマートフォンの画面に緑色の線が表示されるというトラブルに遭遇したことがある方もいると思いますし、見たことはなくても、関連する写真をインターネット上で見たことがあるはずです。では、スマートウォッチの画面が白くなってしまう状況に遭遇したことはありますか？ CNMOは4月2日、海外メディアから、Redditユーザーがサムスンウォッチシリーズのスマートウォッチの画面が白くなっている写真をソーシャルプラットフォームで共有したことを知った。ユーザーは、「出発時に充電していましたが、戻ってきたらこのようになっていました。再起動しようとしましたが、再起動プロセス中も画面はまだこのままでした。」Samsung Watch スマートウォッチの画面が白くなりました。 Reddit ユーザーはスマートウォッチを指定していません。特定のモデルです。しかし、写真から判断すると、Samsung Watch5のはずです。以前、別のRedditユーザーも報告しました

九州風神アサシン4Sラジエターレビュー空冷「アサシンマスター」スタイル Mar 28, 2024 am 11:11 AM

ASSASSINといえば、プレイヤーの皆さんは必ず『アサシンクリード』に登場するマスターアサシンを思い浮かべると思いますが、彼らは熟練しただけではなく、「闇に身を捧げ、光に仕える」という信条を持っています。 - アプライアンスブランド DeepCool の冷却ラジエーターが互いに一致します。このたび、シリーズ最新作「ASSASSIN4S」が登場し、上級者に新たな空冷体験をもたらす『スーツの暗殺者アドバンスト』。外観はディテールに富んでいます. Assassin 4S ラジエーターはダブルタワー構造 + シングルファン内蔵設計を採用しています. 外側は立方体状のフェアリングで覆われており, 全体的な印象が強いです. ホワイトとブラックの2色が用意されています.さまざまな色に合う色。

春の絶妙な光と影のアート、Haqu H2 は費用対効果の高い選択肢です Apr 17, 2024 pm 05:07 PM

春の到来とともにあらゆるものが生き返り、あらゆるものが生命力と活力に満ち溢れます。この美しい季節、家庭生活に彩りを加えるにはどうすればよいでしょうか? Haqu H2 プロジェクターは、絶妙なデザインと超コストパフォーマンスで、この春に欠かせない美しさになりました。コンパクトでありながらスタイリッシュなH2プロジェクター。リビングルームのテレビキャビネットの上に置いても、寝室のベッドサイドテーブルの隣に置いても、美しい風景になります。乳白色のマットな質感のボディは、プロジェクターの高級感を演出するだけでなく、触り心地も向上させたデザインです。ベージュのレザー風の素材が全体の外観に温かみとエレガントさを加えます。この色と素材の組み合わせは、現代の住宅の美的傾向に準拠しているだけでなく、住宅に統合することもできます。

Huntkey MX750P フルモジュール電源レビュー: 750W の集中プラチナ強度 Mar 28, 2024 pm 03:20 PM

コンパクトなサイズで究極の独自の美しさを追求する多くのプレイヤーを魅了するITXプラットフォームは、製造プロセスの改善と技術の進歩により、インテルの第14世代CoreおよびRTX40シリーズのグラフィックスカードの両方がITXプラットフォーム上で強みを発揮することができ、ゲーマーも SFX 電源にはより高い要件があります。ゲーム愛好家である Huntkey は、高性能要件を満たす ITX プラットフォームにおいて、最大 750W の定格電力を備え、80PLUS プラチナレベルの認証を取得した、新しい MX シリーズ電源を発売しました。以下にこの電源の評価を示します。 Huntkey MX750P フルモジュール電源は、シンプルでファッショナブルなデザインコンセプトを採用しており、プレイヤーに合わせて選択できるブラックとホワイトの 2 つのモデルがあり、どちらもマットな表面処理が施されており、シルバーグレーとレッドのフォントで質感が優れています。

4K HD映像がわかりやすい！この大規模なマルチモーダルモデルは、Web ポスターのコンテンツを自動的に分析するため、作業者にとって非常に便利です。 Apr 23, 2024 am 08:04 AM

PDF、Web ページ、ポスター、Excel グラフの内容を自動的に分析できる大型モデルは、アルバイトにとってはあまり便利ではありません。上海 AILab、香港中文大学、その他の研究機関が提案した InternLM-XComposer2-4KHD (略称 IXC2-4KHD) モデルは、これを実現します。解像度制限が 1500x1500 以下である他のマルチモーダル大型モデルと比較して、この作業ではマルチモーダル大型モデルの最大入力画像が 4K (3840x1600) 解像度を超え、任意のアスペクト比と 336 ピクセルをサポートし、 4K 動的解像度の変更。発売から3日後、このモデルはHuggingFaceのビジュアル質疑応答モデルの人気ランキングで1位となった。扱いやすい

Colorful Hidden Star P15 24 レビュー：見た目も性能も兼ね備えたハードコアなオールラウンドゲーミングノートPC Mar 06, 2024 pm 04:40 PM

現在の急速な技術発展の時代において、ラップトップは人々の日常生活や仕事に欠かせない重要なツールとなっています。高いパフォーマンス要件を持つプレーヤーにとって、強力な構成と優れたパフォーマンスを備えたラップトップは、彼らのハードコアなニーズを満たすことができます。 Colorful Hidden Star P15 ノートブックコンピューターは、その優れたパフォーマンスと見事なデザインにより、将来のリーダーとなり、ハードコアノートブックのモデルと呼ぶことができます。 Colorful Hidden Star P1524 は、第 13 世代インテル Core i7 プロセッサーと RTX4060Laptop GPU を搭載し、よりファッショナブルな宇宙船デザインスタイルを採用し、細部まで優れたパフォーマンスを発揮します。まずはこの手帳の特徴を見ていきましょう。 Supreme は Intel Core i7-13620H 処理を搭載

iQOO Neo9S Pro+ 画面の簡単な分析。 Jul 19, 2024 pm 03:53 PM

今日のスマートフォン市場では、画面の品質が携帯電話の全体的なパフォーマンスを測定するための重要な指標の 1 つとなっています。 iQOO の Neo シリーズは、ユーザーに優れたゲーム体験と視覚的な楽しみを提供することに常に注力してきました。最新の製品である iQOO Neo9SPro+ は、「スリーグッドアイプロテクションゲーミングスクリーン」を採用しています。次に、このスクリーンの品質を見てみましょう。 iQOO Neo9S Pro+ には、1.5 KOLED e-sports ダイレクトスクリーンが装備されており、1Hz ～ 144Hz のフラッグシップ LTPO アダプティブリフレッシュレートをサポートしています。つまり、静的コンテンツを表示するときに超低電力スタンバイ状態を実現でき、インテリジェントな表示も可能です。ゲーム中は90Hzから144Hzのダイナミックハイに切り替えます。

NIKKOR Z 28-400mm f/4-8 VR レンズによる真のワンレンズ体験 Mar 28, 2024 pm 02:54 PM

多くの写真愛好家はレンズを使用することを好みますが、撮影ニーズは非常に変化しやすいため、レンズの選択に関しては、より汎用性の高い製品、いわゆる「1 つのレンズで世界を征服する」レンズを好みます。折しもニコンから新製品、まさに「1本で世界を征服できる」レンズ、NIKKOR Z28-400mmf/4-8VRレンズが発売されました。広角端28mmから望遠端400mmまでをカバーし、Zマウントカメラを搭載することで、非常に豊富な撮影テーマや豊かな視点の変化を簡単に撮影できます。今回はこのNIKKOR Z28-400mmf/4-8VRレンズについて、最近の使用体験を通してお話していきたいと思います。 NIKKOR Z28-400mmf/4-8VRは

See all articles

jQueryは単純なドラッグ効果を実装します

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック