Question

我有一个小问题试图让一个居中的div可拖动。 div使用绝对位置和负边距（可能就在这里找到解决方法）。问题在于这些上下左边缘，改变了可拖动区域的限制。因此，如果我设置包含：“窗口”，结果是div可以超出窗口（向左和向上），直到这些负边距结束。

我尝试使用此代码合成此问题：

$(document).ready(function(){
	$("#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;	
}
#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>

有没有办法阻止盒子向左上方移动到顶部？

非常感谢

Answer 1

试试这个。在可拖动创建时，我将边距设置为零并将偏移设置为当前位置

$(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>

Answer 2

我找到了解决方案。我不知道它有多优雅，但......似乎有效

$(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;	
}
#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>

任何改进都将受到赞赏

Answer 3

效率的轻微重构：

$(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();
});

Answer 4

是的，就像我最终使用的那样：）

$(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();
  });			
})

#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>

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

4 个答案: