JQuery draggable DIV с отрицательным краем ... выпуск

У меня есть небольшая проблема, пытаясь сделать центрированный div draggable. Дивертируется с использованием абсолютного положения и отрицательного поля (обходной путь найден, возможно, прямо здесь). Проблема в том, что эти верхние и левые отрицательные поля изменяют предел области перетаскивания. Поэтому, если я устанавливаю сдерживание: «окно», результатом является то, что div может выйти за пределы окна (влево и вверх) до конца этого отрицательного поля.JQuery draggable 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

Я попытался использовать внешний контейнер или попытался с телом, но у меня была еще одна ошибка: divgable 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 draggable DIV с отрицательным краем ... выпуск

ответ

Смежные вопросы