我有以下代码,并尝试允许一个点(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进行拖动。
创建点时,无法拖动它。我的代码中缺少什么东西?
由于
答案 0 :(得分:1)
试试这个:
$(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 });
});
});
答案 1 :(得分:1)
$(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 });
});