jQuery-如何在每次按下按钮时创建一个新的可拖动div

尼克·巴雷特(Nic Barrett)

使用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,都可以拖动?

博扬·佩特科夫斯基(Bojan Petkovski)

此处的示例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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

jQuery-在mousedown上创建一个新的可拖动div,然后可以在同一操作中将其拖动

如何在jQuery中的每次点击时一个一个地循环一组div?

如何使用jQuery创建一个新的div?

如何使用jQuery将一个div拖动到另一个div?

如何制作一个父 div,每当我点击它里面的任何地方时,一个子 div(jQuery UI 可拖动)会立即去那里?

如何通过jQuery为某些div创建一个新的div父级?

jQuery的可排序的UI删除项目,当拖动到一个特定的div

使用jQuery创建一个新的div

如何创建一个循环来在每次按下按钮时指定不同的动作?

单击下一个和上一个按钮时如何在JQuery中访问动态生成的div元素值

每次在JQuery中选中div时,如何拥有一个持久的复选框来打开或关闭div?

JS/JQUERY 如何在同一个 DIV 中优先点击按钮

在 JQuery 中创建一个按钮

如何使JQuery的droppable元素接受一堆中的一个和仅一个可拖动元素?

HTML-如何在使用jQuery Mobile CSS时做一个方形的普通按钮

如何在父div jQuery单击时显示下一个div

每次单击按钮时如何创建一个新的div?

如何在使用 jquery 拖动元素时旋转框 div

我如何在jQuery中创建一个对象

每次按下按钮都会创建一个新标签

按下按钮时如何重新加载 jQuery 元素

如何制作按钮,当按下按钮时,该按钮会消失并显示一个新的div

默认情况下如何在jQuery的fancybox 2中带上一个和下一个按钮?

jQuery在按下按钮时为动画选择下一个eq(i + 1)

jQuery可排序的可拖动或可拖放的多个列表到一个列表并还原

在JQuery UI上执行一个可拖动的connectToSortable多个可排序对象

jQuery的UI可拖动的可排序元素到一个iframe

当鼠标在jQuery中按下时,如何滚动div?

如何获得一个UI按钮,使其在每次按下时执行不同的任务?