Jquery Пользовательский интерфейс перетаскиваемого элемента может быть перемещен за желаемую ширину - PullRequest
Новая
       18

Jquery Пользовательский интерфейс перетаскиваемого элемента может быть перемещен за желаемую ширину

0 голосов
/ 18 января 2020

У меня есть два div с перетаскиваемой функциональностью, но мне было интересно, есть ли способ заблокировать их, чтобы их нельзя было перетаскивать вправо и вниз? Это css и js для каждого перетаскиваемого div: 

#the-sheet {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  border-radius: 25px;
  top: 200px;
  left: 250px;
  right: 250px;
  height: 400px;
  width: 1000px;
  background-color: #FFFAFA; 
  font-family: 'Open Sans', sans-serif;
  border: 1px solid red;  
}

#second-sheet {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 250px; 
  right: 250px;
  border-radius: 25px;
  top: 650px;
  height: 500px;
  width: 1000px;
  background-color: #FFFAFA; 
  font-family: 'Open Sans', sans-serif;
  border: 1px solid red;
}

и js: 

$('#the-sheet, #second-sheet').draggable( {
    appendTo: "body",
    scrollSpeed: 600,
    snap: false,
});

Что я хочу, чтобы иметь возможность перетаскивать их на определенное количество, но их можно перетаскивать вправо, увеличивая ширину и перетаскивая ее за желаемую ширину.

1 Ответ

0 голосов
/ 18 января 2020

Вы можете использовать оболочку, чтобы «содержать» перетаскиваемые элементы. 

$('#the-sheet, #second-sheet').draggable( {
    appendTo: "body",
    scrollSpeed: 600,
    snap: false,
    containment: "#containment-wrapper"
});

Пример фрагмента для отображения поведения - 

$(document).ready(function() {
  $( ".box" ).draggable({ containment: "#containment-wrapper" })
})
.box{
  
    left:50px;
    top:50px;
    width: 150px;
    height: 150px;
    background: red
}

#containment-wrapper{
   width:300px;
   height:300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="containment-wrapper">
    <div class="box"></div>

</div>
...