ホームページ > ウェブフロントエンド > jsチュートリアル > jquery_jquery に基づくドラッグ レイアウト プラグイン

jquery_jquery に基づくドラッグ レイアウト プラグイン

WBOY
リリース: 2016-05-16 17:58:57
オリジナル
1064 人が閲覧しました
コードをコピー コードは次のとおりです:

(function($){
$.fn .lsMovePanel= function(){
var id=this.attr("id");
var X=Y=0; //絶対位置
var OldIndex=0 ;///ストレージの元のインデックス
var Temp_Li="
  • " ;
    var Move_obj;///現在ドラッグされているオブジェクト
    $("#" id " li").each(function(i){
    $(this).attr("open"," 0" );
    //マウスクリック
    $(this).bind("mousedown",function(){
    if(event.button==1 ||event.button==0){ $(this).attr("open","1");}
    if($(this).attr("open")=="1"){
    $(this).css( {
    カーソル: "移動"、
    不透明度: "0.7"
    });
    X=event.clientX;
    Y=event.clientY; ). offset().left;
    offsetY=$(this).offset().top;
    $(this).css( 🎜> 位置:"絶対",
    left:offsetX,
    top:offsetY
    });
    $("#" id " li").each(function(i){
    if (i==OldIndex){
    $(this).after(Temp_Li)
    }
    })
    }
    }); 🎜> $(this).bind("mouseup",function(){
    if(event.button==1 ||event.button==0){$(this).attr("open"," 0" );}
    if($(this).attr("open")=="0"){
    $("#Temp_Li").before($(this));
    $( this).animate({
    left:$("#Temp_Li").offset().left,
    top:$("#Temp_Li").offset().top,
    } ,300 ,function(){
    $("#Temp_Li").remove();
    $(this).css({
    カーソル:"デフォルト",
    不透明度:"1" ,
    position:"static"
    });
    $("#" id " li").each(function(i){
    $(this). css( {
    "border-color":"#666666"
    })
    }
    }); ).bind("mousemove",function(){
    if($(this).attr("open")=="1"){
    var current_X=current_Y=0;
    current_X= offsetX イベント .clientX-X;
    current_Y=offsetY events.clientY-Y;
    $(this).css({
    position:"absolute",
    left:current_X,
    top :current_Y
    });
    Move_obj=this;
    $("#" id " li").each(function(i){
    if(i!=OldIndex && $(this) .attr ("id")!="Temp_Li"){
    var Deviation=0;
    var Max_X=$(this).offset().left $(this).width()-Deviation
    var Min_X=$(this).offset().left 偏差;
    var Max_Y=$(this).height()-Deviation;
    var Min_Y= $( this).offset().top 偏差;
    if((event.clientX < Max_X) && (event.clientY $(Move_obj).height() > Max_Y) && (event.clientY $(Move_obj) ). height() > Min_Y) && (event.clientX > Min_X) && (event.clientY < Max_Y) ){
    $(this).css({
    "border-color":" #FF7578 "
    });
    //カバーされたオブジェクトのインデックス値が前か後かを判断します
    if(OldIndex>$(this).index()){
    $(" #Temp_Li").before ($(this));
    $("#Temp_Li").remove();
    $(this).before(Temp_Li);
    }else{
    $("#Temp_Li" ).after($(this));
    $("#Temp_Li").remove();
    $(this).after(Temp_Li); >}else{
    $(this).css({
    "border-color":"#666666"
    });
    }
    }
    })

    }) ;
    });
    }

    呼び出し例:




    コードをコピー


    コードは次のとおりです:





    >