相关疑难解决方法(0)

我已经在JQuery和html5中实现了拖放功能,它在chrome中工作得很好,但在Firefox中保留了以下是我的代码,我警告丢弃图像的ID,在Firefox中显示为未定义,以下是我的代码,请帮忙.jsfiddle:http://jsfiddle.net/rajutikale/2R6p8/

视图:

<!-- dragable image --> 
<a href="#?w=976" rel="popup1" id="<?=$album['album_id'].'-'.$data->content_id?>" class="poplight album_photos"><img  id="<?=$album['album_id'].'-'.$data->content_id?>" draggable="true" ondragstart="drag(event)" ondragover="allowDrop(event)" alt="" src="<?=$imagePath?>"></a>

<input type="hidden" id="<?='wall'.$data->content_id?>" value="<?=$data->wall_id?>" />
<input type="hidden" id="<?='type'.$data->content_id?>" value="<?=$data->content_type?>" />
<input type="hidden" id="<?='user'.$data->content_id?>" value="<?=$_SESSION['user_type']?>" />

<!-- dropable area -->
<div class="" style="z-index: 1; position:fixed; right:124px; top:60px" id="div1" ondrop="drop(event);;" ondragover="allowDrop(event);"> <a href="#"><img id="dropzon_image"src="<?php echo IMAGE_PATH_HTTP?>babbler_btn.jpg" alt="" border="0" style="cursor: pointer; cursor: hand; "/></a>
    <div id="overlay" style="display:none;z-index: 2;  position:fixed; right:0px; top:32px; cursor: pointer;border-color: blueviolet;">
        <img id="drop_image" src="<?php echo IMAGE_PATH_HTTP?>drop_image.jpg" alt="" border="1" style="cursor: …

我试图在JS和HTML中构建一个可重新排序的列表.(尝试不使用jQuery ui)我似乎无法弄清楚为什么只有dragstart和dragend事件在拖动列表项时触发.任何人都知道为什么其他事件没有解雇？

<ul>
    <li draggable="true" class="drag">1111111</li>
    <li draggable="true" class="drag">222222</li>
    <li draggable="true" class="drag">333333</li>
    <li draggable="true" class="drag">444444</li>
</ul>

<script type="text/javascript">
    var drags = document.querySelectorAll('.drag');
    [].forEach.call(drags, function(drag) {
      drag.addEventListener('dragstart', handleDragStart, false);
      drag.addEventListener('dragenter', handleDragEnter, false);
      drag.addEventListener('dragover', handleDragOver, false);
      drag.addEventListener('dragleave', handleDragLeave, false);
      drag.addEventListener('dragend', handleDragEnd, false);
    });

    function handleDragStart(e){
        console.log('handleDragStart');
    }

    function handleDragEnter(e){
        console.log('handleDragEnter');
    }

    function handleDragOver(e){
        console.log('handleDragOver');
    }

    function handleDragLeave(e){
        console.log('handleDragLeave');
    }

    function handleDragEnd(e){
        console.log('handleDragEnd');
    }
</script>