1

我正在尝试在动态内容上应用 querySelectorAll。
我正在实现如下代码：

<div class="drag" draggable="true">hello</div>
<div class="drop"></div>

这些标签是在页面上动态创建的。QuerySelectorAll 不适用于这两个标签。

            var cols = document.querySelectorAll('.drag');
        [].forEach.call(cols, function (col) {
            col.addEventListener('dragstart', handleDragStart, false);
            col.addEventListener('dragend', handleDragEnd, false);
        });

        var colss = document.querySelectorAll('.drop');
        [].forEach.call(colss, function (col) {
            col.addEventListener('dragenter', handleDragEnter, false)
            col.addEventListener('dragleave', handleDragLeave, false);
            col.addEventListener('dragover', handleDragOver, false);
            col.addEventListener('drop', handleDrop, false);
        });

我的问题是我试图在这两个 div 上应用代码，但是如果这些标签是静态的，querySelectorAll 可以工作，但是如果我动态创建这两个 div，它们就不能工作。

我已经从 HTML5 拖放 API 参考[链接]应用了这段代码：http: //www.html5rocks.com/en/tutorials/dnd/basics/

提前致谢...！！！

4

1 回答 1

1

我使用 jQuery 解决了这个问题。下面的代码效果最好：

            $('body').on('dragstart', '.drgbl', function (e) {
            handleDragStart(e)
        });
        $('body').on('dragend', '.drgbl', function (e) {
            handleDragEnd(e)
        });
        $('body').on('dragenter', '.rght-element', function (e) {
            handleDragEnter(e)
        });
        $('body').on('dragleave', '.rght-element', function (e) {
            handleDragLeave(e)
        });
        $('body').on('dragover', '.rght-element', function (e) {
            handleDragOver(e)
        });
        $('body').on('drop', '.rght-element', function (e) {
            handleDrop(e)
        });

这个 jQuery 代码在动态数据上工作得非常好，就像.on()在处理动态数据附加处理程序上一样容易。

谢谢大家让我能够找出答案。

于 2013-09-10T18:10:33.680 回答