1
ユーザーが1つのリストから別のリストにアイテムをドロップできるアプリケーションがあります。各リストは、それぞれ独自の子を持つ要素としてdivの番号を持っています。私は親のdivのIDに依存してドロップが実行された場所を検出しますが、カーソルがその時にそれらの上にあったので、子供がイベントを消費することが時々あります。それらの子供にdroptarget="false"のようなものを追加することでそれを回避する方法はありますか？HTML make要素がドロップターゲットを無効にする
私はとにかく必要（およびそのあまり）が、内のコードを考えていない：
<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() {
}) ;