如何限制可拖動對象移動到某個區域？

Question

我給了用戶在屏幕上生成輸入並移動每個字符的能力。

我不希望他們能夠移動/放置這些字符的任何地方，但我想限制運動到一個小方形或矩形。

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')); 
    }); 
}); 

Answer 1

看起來你可以指定遏制：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元素中垂直和水平地單擊和拖動元素。