[英]Why is jQuery-UI draggable not working?
我有以下代碼,我試圖允許一個點(img和div中的文本)一旦創建就可以拖動。
<div id="container">
<img src="images/aoi.png" alt="" />
<div id="point_panel">
<form>
<fieldset id="point_container">
<img id="point" src="images/point.png" alt="" /><input id="point_name" type="text" />
</fieldset>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#point').click(function() {
var alt = $('#point_name').val();
$('#container').append('<div class="points"><img src="images/point.png" alt=\"'+alt+'\" />'+alt+'</div>');
});
$('.points').draggable({ containment: '#container', stack: '.points', opacity: 0.5, zIndex: 100 });
});
</script>
用戶點擊表單中的img,創建一個具有相同img和文本的新div。 那個div應該可以在div中的任何位置使用容器的id拖動。
當我創建點時,它不能被拖動。 我的代碼中缺少什么?
謝謝
嘗試這個:
$(document).ready(function() {
$('#point').click(function() {
var alt = $('#point_name').val();
var el = $('<div class="points"><img src="images/point.png" alt=\"'+alt+'\" />'+alt+'</div>');
$('#container').append(el);
$(el).draggable({ containment: '#container', stack: '.points', opacity: 0.5, zIndex: 100 });
});
});
$(document).ready(function() {
$('#point').click(function() {
var alt = $('#point_name').val();
$('#container').append('<div class="points"><img src="images/point.png" alt=\"'+alt+'\" />'+alt+'</div>');
//bind draggable to last inserted div
$('#container').find('.points:last').draggable({ containment: '#container', stack: '.points', opacity: 0.5, zIndex: 100 });
});
$('.points').draggable({ containment: '#container', stack: '.points', opacity: 0.5, zIndex: 100 });
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.