Javascript Console.log-getElementsByClassName
我正在努力学习HTML5“DnD”。Javascript Console.log-getElementsByClassName,javascript,html,Javascript,Html,我正在努力学习HTML5“DnD”。 我有一个用PHP的HTML创建的表。 echo "<li class='elements' id='".$row['id']."' draggable='true'>".$row['element_nr']."</li>"; 然后只是为了好玩,我想安慰这个变量,看看里面有什么。所以我使用: var element = document.getElementsByClassName('elements'); console.log(e
我有一个用PHP的HTML创建的表。
echo "<li class='elements' id='".$row['id']."' draggable='true'>".$row['element_nr']."</li>";
然后只是为了好玩,我想安慰这个变量,看看里面有什么。所以我使用:var element = document.getElementsByClassName('elements');
console.log(element);
现在当我检查控制台时,我什么也看不到。当我拖动文本时,我什么也看不到。我也尝试过“提示(元素);”
如何查看“var元素”中的内容?这是我的代码。(还没有真正工作)
JS
$(document).ready(function(){
function doFirst(){
element = document.getElementsByClassName('elements');
element.addEventListener('dragstart', startDrag, false);
drop_element = document.getElementById('drop_element');
drop_element.addEventListener('dragenter', function(e){e.preventDefault();}, false);
drop_element.addEventListener('dragover', function(e){e.preventDefault();}, false);
drop_element.addEventListener('drop', dropped, false);
}
function startDrag(e){
var element = document.getElementsByClassName('elements');
console.log(element);
e.dataTransfer.setData('Text', element);
}
function dropped(e){
e.preventDefault();
drop_element.innerHTML = e.dataTranfer.getData('Text');
}
window.addEventListener('Load', doFirst, false);
});
HTML
<section id="drag_element">
<ul>
<?php echo "<li class='elements' id='".$row['id']."' draggable='true'>".$row['element_nr']."</li>";?>
</ul>
<section id="drop_element">
drop here
</section>
到这里来
这里的问题是,doFirst()
另外,element.addEventListener
将无法工作,因为它实际上是一个活动的元素数组
试试这个
jQuery(function(){
function doFirst(){
jQuery('.elements').on('dragstart', startDrag);
jQuery('#drop_element').on('dragenter dragover', function(e) { e.preventDefault(); });
jQuery('#drop_element').on('drop', dropped);
}
function startDrag(e){
var elements = document.getElementsByClassName('elements');
console.log(elements);
e.dataTransfer.setData('Text', element);
}
function dropped(e){
e.preventDefault();
jQuery('#drop_element').html(e.dataTranfer.getData('Text'));
}
jQuery('window').on('load', doFirst);
});
您正在使用jQuery
。你为什么还要使用getElementsByClassName
和其他所有的普通JS呢?最好坚持一个或另一个。addEventLister
只能为单个元素添加document.getElementsByClassName
返回元素的集合-如果你想添加事件,你应该迭代它们并为每个事件添加侦听器。看起来,我真的不知道我在这里做什么。我需要更多的练习。仅仅一份JS对我来说是行不通的。我想我需要更多的练习。
jQuery(function(){
function doFirst(){
jQuery('.elements').on('dragstart', startDrag);
jQuery('#drop_element').on('dragenter dragover', function(e) { e.preventDefault(); });
jQuery('#drop_element').on('drop', dropped);
}
function startDrag(e){
var elements = document.getElementsByClassName('elements');
console.log(elements);
e.dataTransfer.setData('Text', element);
}
function dropped(e){
e.preventDefault();
jQuery('#drop_element').html(e.dataTranfer.getData('Text'));
}
jQuery('window').on('load', doFirst);
});