使用JQuery,我需要能够按下按钮并创建可拖动的div。我的代码如下
我的身体有以下风格
<style>
#draggable {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
这是我要放置div的容器,以及应该创建新div的按钮。当我在页面加载时创建div时,它是可拖动的,并且可以按预期工作。
<container id="area">
<a class="btn btn-primary" id="create_block">Create</a>
<div id="draggable">Draggable</div>
</container>
然后,我在主体中放有此脚本,该脚本创建了单击按钮时的可拖动对象,而据我所知,该代码使所有具有id =“ draggable”的事物都变为可拖动对象。
<script>
$( "#create_block" ).click( function() {
$( '<div/>' ).attr({
'id' : 'draggable'
}).appendTo("#area");
});
$( '#draggable' ).draggable();
</script>
当我单击按钮时,它将创建一个样式正确的div,但它不可拖动。
我不知道这有什么用。我看过一些类似事情的不同示例,但看来这应该可行。我想念什么?我正在使用引导程序,但没有其他框架。
如何创建一个新的div,以及其他所有通过按下按钮创建的div,都可以拖动?
此处的示例http://jsfiddle.net/eb34jztf/
您需要启动可拖动到每个新创建的元素的位置,以后请不要在一页上使用相同的id值:)
$("#create_block").click(function () {
$('<div/>').attr({
'class': 'draggable'
}).draggable().appendTo("#area");
//initiate draggable on every new created elements
});
//Don't need this part if the draggable elements are only created on click
$('.draggable').draggable(); // initiate the first draggable element that you already have
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句