jQueryのドラッグ＆ドロップ効果を実装する方法-jsチュートリアル-php.cn

jQueryのドラッグ＆ドロップ効果を実装する方法

php中世界最好的语言

リリース： 2018-04-24 11:17:46

オリジナル

1860 人が閲覧しました

今回は、jqueryのドラッグアンドドロップ効果を実装する方法について説明します。jqueryのドラッグアンドドロップ効果を実現するための注意事項は何ですか?実際のケースを見てみましょう。

実行中のエフェクトのスクリーンショットは次のとおりです:

ここをクリックしてオンラインデモンストレーションエフェクトを表示します。

具体的なコードは次のとおりです:

html 部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="tuo.js"></script>
<script type="text/javascript">
 $(function(){
  $("#box").tuoz();
 })
</script>
<style type="text/css">
 *{
  margin:0px;
  padding:0px;
 }
 #box{
  height:100px;
  width:100px;
  background:#666666;
 }
 #box img{
  height:50px;
  width:50px;
  background:#666666;
 }
 #big{
  height:400px;
  width:300px;
  background:purple;
 }
</style>
</head>
<body>
 <p id="box"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"></img></p>
 <p id="big"></p>
</body>
</html>

ログイン後にコピー

jquery 部分:

(function(){
 $.fn.extend({
  tuoz:function(){
  return this.each(function(){
    var $this=$(this);
    var ey="";
    var ex="";
    var mx="";
    var my="";
    var tx="";
    var ty="";
    var small_x="";
    var small_y="";
    var big_height="";
    var big_width="";
    var big_x="";
    var big_y="";
    var move="false";
    $this.mousedown(function(e){
     move="true";
     mx=$this.offset().left;
     my=$this.offset().top;
     ex=e.clientX;
     ey=e.clientY;
     tx=ex-mx;
     ty=ey-my;
     small_x=$("#big").offset().left;
     small_y=$("#big").offset().top;
     big_height=$("#big").height();
     big_width=$("#big").width();
     big_x=small_x+big_width;
     big_y=small_y+big_height;
     })
    $(document).mousemove(function(e){
      ex=e.clientX;
      ey=e.clientY;
      if(move=="true"){
      $this.offset({left:ex-tx,top:ey-ty});
      }
      })
    $this.mouseup(function(e){
      move=false;
      ex=e.clientX;
      ey=e.clientY;
      if(ex>=small_x && ey>=small_y && ex<=big_x && ey<=big_y){
    $("#big").append($this.html());
    }
      $this.offset({left:mx,top:my});
      })
    })
  }
  })
})(jQuery)

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 php中国語ウェブサイトで！

推奨読書:

jQueryは、マウスが上を通過したときに画像を拡大する機能を実装します

jQueryは、画像のスライド切り替えを実装します(コード付き)

以上がjQueryのドラッグ＆ドロップ効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。