Draggable - Приклеить эллемент

196
27 апреля 2019, 21:00

Как сделать, что бы эллемент #drag приклеивался к внутринним границам a .game-board и собственно элемменты(#drag) приклеивались друг к другу. Вот наработка, друг к другу клеятся, а к границам не клеятся.

var dice, element = 0; 
// document.querySelector('.roll-dice').addEventListener('click', function(){ 
//     $('.roll-dice').hide(); 
// }); 
$('.roll-dice').click(function(){ 
    dice = Math.floor(Math.random() * 5) + 1; 
    $('.row .dice').contents().remove(); 
    $('.row .dice').prepend('<img src="/img/dice-' + dice + '-solid.svg" id="showDice">'); 
    $('.game-board').prepend('<div class="squarePosition" id="drag' + ++element + '">drag me</div>'); 
    // $('#drag' + element).draggable({snap:true, snapTolerance:12}); 
    // $('#drag' + element).draggable({snapTolerance:12}); 
    // $('.game-board').draggable();  
    $("#drag" + element).draggable({ 
        containment: '.game-board', 
        snap: true, 
        snapTolerance:30, 
        snapMode: 'both' 
      }); 
});
*{ 
    box-sizing: border-box !important; 
     
} 
.col-sm-8{ 
    padding: 1px !important; 
} 
.game-board{ 
    border: 1px solid rgba(158, 129, 158, 0.933); 
    background: #ececec; 
    height: 500px; 
    /* float: left; */ 
    position: relative; 
    overflow: hidden; 
     
} 
.game-board-navigation{ 
    border: 1px solid rgba(158, 129, 158, 0.933); 
    background: #ececec; 
    height: 500px; 
    float: right; 
} 
.btn {width:100%;} 
.btn-push{ 
    width: 100px ; 
    float: left; 
    position: absolute; 
    margin-left: 0px;	 
    margin-top: 20px; 
} 
.btn-group-toggle{ 
    width: 90%; 
} 
.new-game{ 
    justify-content: center; 
} 
.btn-lg{ 
    width: 60%; 
    margin-top: 40px; 
} 
.playing-field-size{ 
    margin-top: 20px; 
    justify-content: center; 
} 
.dice{ 
    justify-content: center; 
    margin-top: 40px; 
} 
.roll-dice{ 
    justify-content: center; 
} 
 
.squarePosition{ 
    /* position: absolute; */ 
    top: 50%; 
    right: 50%; 
    float: right; 
    /* position: fixed; */ 
    position: absolute; 
    background-color: orange; 
    width: 50px; 
    height: 50px; 
    margin: 0px; 
}
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8"> 
        <link type="text/css" rel="stylesheet" href="/css/style.css"> 
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
         
        <!-- Bootstrap CSS --> 
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> 
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 
        <!-- JS UI DRAGABLE--> 
        <link rel="stylesheet" href="/css/jquery-ui.css"> 
        <title>SquareProject</title> 
    </head> 
    <body> 
        <div class="container"> 
            <div class="row"> 
                <!-- Gameboard --> 
                <div class="col-sm-8 game-board"> 
                         
                </div> 
                <!-- ActionGame DICE --> 
                <div class="col-sm-4 game-board-navigation"> 
                    <div class="row playing-field-size"> 
                        <div class="btn-group btn-group-toggle" data-toggle="buttons"> 
                            <label class="btn btn-secondary active"> 
                                <input type="radio" name="options" id="option1" autocomplete="off" checked> 100 x 100 
                            </label> 
                            <label class="btn btn-secondary"> 
                                <input type="radio" name="options" id="option2" autocomplete="off"> 250 x 250 
                            </label> 
                            <label class="btn btn-secondary"> 
                                    <input type="radio" name="options" id="option3" autocomplete="off"> 500 x 500 
                            </label> 
                        </div> 
                    </div> 
                    <div class="row new-game"> 
                            <button type="button" class="btn btn-secondary btn-lg">Начать игру</button> 
                    </div> 
                    <div class="row dice"> 
                        <!-- <i class="fas fa-dice-one"></i> --> 
                        <img src="/img/dice-1-solid.svg" class="svg"> 
 
                    </div> 
                    <div class="row roll-dice"> 
                            <button type="button" class="btn btn-secondary btn-lg">Бросить кубик</button> 
                    </div> 
                </div> 
            </div> 
        </div> 
         
         
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
        <script src="js/jquery-ui.min.js"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 
        <script src="/js/main.js"></script> 
    </body> 
</html>

READ ALSO
Валидация regExp

Валидация regExp

Просьба помочь сделать валидацию поискачто у меня : символы которые я хочу отсеиваются,НО если первоначально ввести пробел - то выскакивает...

211
Как удалить localStorage в JSON?

Как удалить localStorage в JSON?

Сохраняю переменную

161
Создание JS плагина

Создание JS плагина

Скажите пожалуйста

160
Получить предыдущее значение атрибута data- у выбранной ранее ссылки

Получить предыдущее значение атрибута data- у выбранной ранее ссылки

Пытаюсь получить предыдущее значение data-type у выбранной ранее ссылки (selected) при клике по новой

170