How do I get the coordinate position after using jQuery drag and drop?

前端 未结 9 1375
北荒
北荒 2020-11-29 20:36

How do I get the coordinate position after using jQuery drag and drop? I want to save the coordinate to a database, so that next time I visit, the item will be in that posi

9条回答
  •  孤街浪徒
    2020-11-29 20:54

    $(function() 
      {
        $( "#element" ).draggable({ snap: ".ui-widget-header",grid: [ 1, 1 ]});
      });
        $(document).ready(function() {
            $("#element").draggable({ 
                    containment: '#snaptarget', 
                    scroll: false
             }).mousemove(function(){
                    var coord = $(this).position();
                    var width = $(this).width();
                   var height = $(this).height();
                    $("p.position").text( "(" + coord.left + "," + coord.top + ")" );
                    $("p.size").text( "(" + width + "," + height + ")" );
             }).mouseup(function(){
                    var coord = $(this).position();
                    var width = $(this).width();
                    var height = $(this).height();
                    $.post('/test/layout_view.php', {x: coord.left, y: coord.top, w: width, h: height});
                   
                    });
            });
    #element {background:#666;border:1px #000 solid;cursor:move;height:110px;width:110px;padding:10px 10px 10px 10px;}
    #snaptarget { height:610px; width:1000px;}
    .draggable { width: 90px; height: 80px; float: left; margin: 0 0 0 0; font-size: .9em; }
    .wrapper
    { 
    background-image:linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
    height:100%;
    background-size:45px 45px;
    border: 1px solid black;
    background-color: #434343;
    margin: 20px 0px 0px 20px;
    }
    
    
      
        
        Layout
        
        
        
        
        
      
    
        

提交回复
热议问题