JQuery可拖动的DIV以负边距为中心...问题

我有一个小问题试图使居中的div可拖动。 div使用绝对位置和负边距进行居中（可能在此处找到解决方法）。问题是，这些顶部和左侧的负边距改变了可拖动区域的限制。因此，如果我设置了包含：“窗口”，结果是div可以超出窗口（左侧和顶部），直到这些负边距结束。JQuery可拖动的DIV以负边距为中心...问题

我试图合成这个问题与此代码：

$(document).ready(function(){ 
 
\t $("#box").draggable({containment: "window", scroll: false}); 
 
})

#box{ 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    margin-top:-50px; 
 
    margin-left: -50px; 
 
    width:100px; 
 
    height:100px; 
 
    background-color:green; 
 
    text-align:center; 
 
    line-height:8; 
 
    font-size:12px; 
 
    color:white; \t 
 
} 
 
#box:hover{ 
 
    cursor:move; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> \t 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> \t 
 
</head> 
 
<body> 
 
<div id="box"> 
 
    <span>DRAG ME A LOT</span> 
 
</div>  
 
</body> 
 
</html>

有没有一种方法，以防止从箱子走出去左边和顶部？

很多谢谢

来源

2016-08-18 Fabio

也许包含在'body'并添加'50px'保证金顶部和左侧？ – Owlvark

我试图使用外部容器或尝试与身体，但我有另一个错误：可拖动的div消失.... 我认为我发现下面的解决方案更好 – Fabio

我找到了解决办法。我不知道它是多么优雅，但...这似乎工作

$(document).ready(function(){ 
 
    var x1=50;//half box width 
 
    var x2=$(window).width()-x1; 
 
    var y1=50;//half box height 
 
    var y2=$(window).height()-y1; 
 

 
    $("#box").draggable({containment:[x1,y1,x2,y2], scroll: false}); 
 

 
    //DRAG AFTER RESIZE 
 
    $(window).resize(function(){ 
 
    var new_x2=$(window).width()-x1; 
 
    var new_y2=$(window).height()-y1; 
 
    $("#box").draggable({containment:[x1,y1,new_x2,new_y2], scroll: false}); 
 
    }); 
 
})

#box{ 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    margin-top:-50px; 
 
    margin-left: -50px; 
 
    width:100px; 
 
    height:100px; 
 
    background-color:green; 
 
    text-align:center; 
 
    line-height:8; 
 
    font-size:12px; 
 
    color:white; \t 
 
} 
 
#box:hover{ 
 
    cursor:move; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> \t \t 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> \t 
 
</head> 
 
<body> 
 
\t <div id="box"> 
 
\t \t <span>DRAG ME A LOT</span> 
 
    </div>  
 
</body> 
 
</html>

任何改进可以理解

来源

2016-08-18 20:34:19 Fabio

效率轻微重构：

$(document).ready(function() { 
    var $window = $(window); 
    var $box = $("#box"); 
    var boxWidth = 100; 
    var xOffs = boxWidth/2.0; // half box width 
    var yOffs = boxWidth/2.0; 

    var onResize = function() { 
     var new_x2 = $window.width() - xOffs; 
     var new_y2 = $window.height() - yOffs; 
     $box.draggable({ 
      containment:[xOffs, yOffs, new_x2 ,new_y2], 
      scroll: false 
     }); 
    }; 

    $(window).resize(function(){ 
     onResize(); 
    }); 
    onResize(); 
});

来源

2016-08-19 20:50:45 Owlvark

是的，就像我终于使用:)

$(document).ready(function(){ 
 
    function init_drag(){ 
 
    var x1=50;//half box width 
 
    var x2=$(window).width()-x1; 
 
    var y1=50;//half box height 
 
    var y2=$(window).height()-y1; 
 
    $("#box").draggable({containment:[x1,y1,x2,y2], scroll: false}); 
 
    } 
 

 
    init_drag(); 
 
    $(window).resize(function(){ 
 
    init_drag(); 
 
    }); \t \t \t 
 
})

#box{ 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    margin-top:-50px; 
 
    margin-left: -50px; 
 
    width:100px; 
 
    height:100px; 
 
    background-color:green; 
 
    text-align:center; 
 
    line-height:8; 
 
    font-size:12px; 
 
    color:white; \t 
 
} 
 
#box:hover{ 
 
    cursor:move; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
\t <meta charset="utf-8"> \t \t 
 
\t <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
\t <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> \t 
 
</head> 
 
<body> 
 
\t <div id="box"> 
 
\t \t <span>DRAG ME A LOT</span> 
 
    </div>  
 
</body> 
 
</html>

来源

2016-08-21 08:36:53 Fabio

试试这个。在拖动创建的时候我设置保证金为零，设置偏移到当前位置

$(document).ready(function() { 
 
    $("#box").draggable({ 
 
    containment: "window", 
 
    scroll: false, 
 
    create: function() { 
 
     var position = $(this).offset(); 
 
     $(this).css('margin', '0').offset({ 
 
     top: position.top, 
 
     left: position.left 
 
     }); 
 
    } 
 
    }); 
 
})

#box { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -50px; 
 
    margin-left: -50px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green; 
 
    text-align: center; 
 
    line-height: 8; 
 
    font-size: 12px; 
 
    color: white; 
 
} 
 

 
#box:hover { 
 
    cursor: move; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="box"> 
 
    <span>DRAG ME A LOT</span> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2018-02-20 17:52:30 Gautham

JQuery可拖动的DIV以负边距为中心...问题

回答

相关问题