如何将可拖动对象移动到某个区域

How do i restrict draggable object movement to an area?

本文关键字：区域 移动 对象 拖动      更新时间：2023-09-26

我让用户能够在屏幕上生成他们的输入，并移动每个字符。

我不希望他们能够在任何地方移动/放置这些字符，我想将移动限制为一个小正方形或矩形。

.HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<div id="word-container">
  <div class="character">P</div>
  <div class="character">l</div>
  <div class="character">a</div>
  <div class="character">c</div>
  <div class="character">e</div>
  <div class="character">m</div>
  <div class="character">a</div>
  <div class="character">r</div>
  <div class="character">k</div>
</div>
<br>
<br>
<form action="demo_form">
  Word:
  <input type="text" id="my-word" name="fname">
  <br>
  <button type="button" id="make-word">Make word</button>
</form>

.CSS

.character {
  width: 10px;
  height: 15px;
  font-size: 50px;
  display: inline;
  cursor: drag;
}

杰奎里

function initDragable($elements) {
  $elements.draggable();
}
initDragable($('.character'));
$(function(){
    $('#make-word').click(function() {
      var $this = $(this);
      var letters = $('#my-word').val().split('');
      letters = '<div class="character">'+letters.join('</div><div class="character">')+'</div>';
      initDragable($('#word-container').html(letters).find('.character'));
    });
});

看起来您可以指定包含： http://api.jqueryui.com/draggable/#option-containment

我相信你可以改变你的 initDraggable 函数：

function initDragable($elements) {
  $elements.draggable({ containment: 'parent' });
}

随后的请求询问了有关移动字符的垂直位置的问题：您可以通过调整字符和字符容器的样式来实现此目的：

.character {
  width: 10px;
  line-height: 100px;
  font-size: 50px;
  display: inline;
  cursor: drag;
}
#word-container {
  height: 100px;
  border: 1px solid black;
}

我在容器周围添加了边框（因此可以轻松看到此功能）并添加了 100px 的高度。然后，我将字符的行高设置为 100px，使其显示在 #word 容器元素的中间。用户现在可以在 #word 容器元素中垂直和水平单击和拖动元素。

相关文章：