如何限制可拖动对象移动到某个区域?
问题描述:
我给了用户在屏幕上生成输入并移动每个字符的能力。如何限制可拖动对象移动到某个区域?
我不希望他们能够移动/放置这些字符的任何地方,但我想限制运动到一个小方形或矩形。
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;
}
JQuery的
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-container元素的中间。用户现在可以在#word-container元素中垂直和水平地单击和拖动元素。
+0
多数民众赞成在任何方式我可以得到它,所以我可以将角色稍微移动到当前位置的上方和下方? –
使用html5原生drap&drop,你可以使用一个属性https://html.spec.whatwg.org/multipage/interaction.html#the-dropzone-attribute –