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以負邊距爲中心...問題

回答

相關問題