我有一个应用程序，用户可以将一些列表中的内容放到另一个列表中。每个列表都有一些div个元素作为元素，每个元素都有自己的子元素。我依靠父div的id来检测执行删除的位置，但有时孩子会消耗事件，因为当时光标在它们之上。有没有办法通过向这些孩子添加droptarget="false"这样的东西来避免这种情况？
我不认为代码是必要的（而且太多了）但是无论如何：
<link rel="stylesheet" href="{{rootURL}}css/assembler.css">
<div class="width_match_parent box_sizing_border flex_container_row flex_align_item_start material_blue_500 padding_large">
<div id="template_assembler_div_card_list" class="layout_weight_2 box_sizing_border flex_container_column padding_large">
<!-- ======================================================================================== -->
<div id="card_1" draggable="true" class="assembler_workflow_card card blue-grey darken-1">
<div class="card-content white-text" ondragover="return true">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
<!-- ======================================================================================== -->
<div id="card_2" draggable="true" class="assembler_workflow_card card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
<!-- ======================================================================================== -->
<div id="card_3" draggable="true" class="assembler_workflow_card card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
<!-- ======================================================================================== -->
<div id="card_4" draggable="true" class="assembler_workflow_card card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
<!-- ======================================================================================== -->
<div id="card_5" draggable="true" class="assembler_workflow_card card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
<!-- ======================================================================================== -->
</div>
<div class="layout_weight_1 box_sizing_border flex_container_column flex_justify_content_start padding_large">
<ul class="collection">
<li draggable="true" class="collection-item ">Alvin</li>
<li draggable="true" class="collection-item ">Alvin</li>
<li draggable="true" class="collection-item ">Alvin</li>
<li draggable="true" class="collection-item ">Alvin</li>
</ul>
<p draggable="true">This is a draggable paragraph.</p>
</div>
</div>
和js：
ANIMATION_DIRECTION_UP = -1 ;
ANIMATION_DIRECTION_DOWN = 1 ;
// ============================================================================================== //
// ============================================================================================== //
// ============================================================================================== //
var initialized = false ;
var dragging = false ;
var animating = false ;
// ============================================================================================== //
// ============================================================================================== //
// ============================================================================================== //
var workflow_cards_div ;
workflow_cards = [] ;
var dragged_workflow_card ;
var current_drag_target ;
var current_animation_direction ;
function WorkflowCard(element) {
this.element = element ;
this.width = element.outerWidth ;
this.height = element.outerHeight ;
}
WorkflowCard.prototype = {
}
function get_workflow_card(id) {
// console.log(workflow_cards.length) ;
for (var i = 0 ; i < workflow_cards.length ; i++) {
// console.log(i + ':' + workflow_cards[i].element)
if (workflow_cards[i].element.id == id) {
return workflow_cards[i] ;
}
}
}
function get_animation_targets(workflow_card) {
if (current_animation_direction == ANIMATION_DIRECTION_UP) {
return get_animation_workflow_cards(workflow_card, true) ;
} else {
return get_animation_workflow_cards(workflow_card, false) ;
}
}
function get_animation_workflow_cards(workflow_card, d) {
l = [] ;
var add = d ;
for (var i = 0 ; i < workflow_cards.length ; i++) {
if (workflow_cards[i].element.id == workflow_card.element.id) {
add = !d ;
}
if (add) {
l.push(workflow_cards[i]) ;
}
}
return l ;
}
// ============================================================================================== //
// ============================================================================================== //
// ============================================================================================== //
function initialize() {
if (!initialized) {
initialized = true ;
get_all_workflow_cards() ;
}
}
function get_all_workflow_cards() {
$('div.assembler_workflow_card').each(function(index, element) {
console.log(Object.prototype.toString.call(element)) ;
workflow_cards.push(new WorkflowCard(element)) ;
}) ;
console.log(Object.prototype.toString.call($('#card_1')))
console.log($('#card_1')) ;
}
function initialize_dimensions() {
workflow_card_div = document.getElementById('template_assembler_div_card_list') ;
}
// ============================================================================================== //
// ============================================================================================== //
// ============================================================================================== //
document.addEventListener("drag", function(event) {
initialize() ;
if (!dragging) {
if (get_workflow_card(event.target.id)) {
dragged_workflow_card = get_workflow_card(event.target.id) ;
console.log('being dragged:' + dragged_workflow_card.element.id) ;
dragging = true ;
}
}
}, false);
document.addEventListener("dragover", function(event) {
event.preventDefault() ;
}, false);
document.addEventListener("dragenter", function(event) {
console.log('entering: ' + event.target.id)
target = get_workflow_card(event.target.id) ;
if (target == undefined) {
}
if (target.element.id != dragged_workflow_card.element.id) {
if (!animating) {
animating = true ;
console.log('dragenter ' + target.element.id) ;
position = $('#' + target.element.id).position() ;
center = {
x: position.left + target.width / 2,
y: position.top + target.height / 2
}
drag_position = {
x: event.screenX,
y: event.screenY
}
if (drag_position.y < center.y) {
// from above, move them down
console.log('from above, move them down') ;
current_animation_direction = ANIMATION_DIRECTION_DOWN ;
} else {
// from below, move them up
console.log('from below, move them up') ;
current_animation_direction = ANIMATION_DIRECTION_UP ;
}
animation_targets = get_animation_targets(target) ;
// console.log(animation_targets) ;
for (var i = 0 ; i < animation_targets.length ; i++) {
console.log(animation_targets[i]) ;
console.log('animating ' + animation_targets[i].element.id)
$('#' + animation_targets[i].element.id).animate({
"top": "+=100"
}) ;
// document.getElementById(animation_targets[i].element.id).animate([
// {transform: 'translateY(' + current_animation_direction * dragged_workflow_card.height + 'px)'}
// ],
// {
// duration: 500,
// iterations: 1,
// easing: "ease-in-out",
// }) ;
}
}
}
}, false);
document.addEventListener("dragleave", function( event ) {
if (!event.target) {
return ;
}
target = get_workflow_card(event.target.id) ;
if (target != undefined) {
// center = target
}
}, false);
document.addEventListener("drop", function( event ) {
event.preventDefault() ;
dragging = false ;
}, false);
// ============================================================================================== //
// ============================================================================================== //
// ============================================================================================== //
$(document).ready(function() {
}) ;
答案 0 :(得分：0)
根据您的问题，我认为您希望逻辑位于drop事件侦听器中，但您似乎在dragenter事件侦听器中拥有它。无论如何，您可以通过比较事件target与currentTarget属性来检测父元素或子元素是否触发了事件。 currentTarget始终是在其上定义事件侦听器的元素。
在您的情况下，您可能希望将它们添加到您关注的父元素，而不是将拖动事件侦听器添加到文档中。然后，您可以通过查看event.currentTarget或通过将id存储在事件侦听器回调中来确定父元素的id。