Home > Web Front-end > JS Tutorial > Drag layout plugin based on jquery_jquery

Drag layout plugin based on jquery_jquery

WBOY
Release: 2016-05-16 17:58:57
Original
1054 people have browsed it
Copy code The code is as follows:

(function($){
$.fn.lsMovePanel= function(){
var id=this.attr("id");
var X=Y=0;
var offsetX=offsetY=0;//Absolute position
var OldIndex=0 ;///Storage original index
var Temp_Li="
  • ";
    var Move_obj;///The currently dragged object
    $("#" id " li").each(function(i){
    $(this).attr("open","0" );
    //Mouse click
    $(this).bind("mousedown",function(){
    if(event.button==1 || event.button==0){$( this).attr("open","1");}
    if($(this).attr("open")=="1"){
    $(this).css({
    cursor: "move",
    opacity: "0.7"
    });
    X=event.clientX;
    Y=event.clientY;
    offsetX=$(this). offset().left;
    offsetY=$(this).offset().top;
    OldIndex=$(this).index();
    $(this).css({
    position:"absolute",
    left:offsetX,
    top:offsetY
    });
    $("#" id " li").each(function(i){
    if (i==OldIndex){
    $(this).after(Temp_Li);
    }
    })
    }
    });
    //Release the mouse
    $(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({
    cursor:"default",
    opacity:"1",
    position:"static"
    });
    });
    $("#" id " li").each(function(i){
    $(this).css( {
    "border-color":"#666666"
    });
    });
    }
    });
    //Move
    $(this). bind("mousemove",function(){
    if($(this).attr("open")=="1"){
    var current_X=current_Y=0;
    current_X=offsetX event .clientX-X;
    current_Y=offsetY event.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 Deviation;
    var Max_Y=$(this).offset().top $(this).height()-Deviation;
    var Min_Y=$( this).offset().top Deviation;
    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 "
    });
    //Determine whether the index value of the covered object is before or after
    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"
    });
    }
    }
    })
    }
    }) ;
    });
    }
    })(jQuery);

    Call example:
    Copy code The code is as follows:




















    <script> <br>$("#Panel") .lsMovePanel(); <br></script>


    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template