I have an app where I’m trying to allow the user to map one item to another. I’m doing this using a series of drag and drop items. When dragging the source
over the target
, I want the target to be highlighted.
My code (below) does not work – initially; however, when running the code, if I make a change and let Webpack push out the changes to my running code, then the highlighting starts working.
Originally, I thought it had to do with my use of <template>
in my repeat.for
; however, I changed the html
to use a table
with no <template>
and I get the same result.
Why is my embedded expression class="dropzone ${targetItem == target ...}"
not being evaluated when targetItem changes? Why does it start getting evaluated after Webpack pushes out new code on the fly?
Note: The key part in the html is the class
attribute of the div
in the targets
area: <div class="dropzone ..."
EDIT For grins, I added click.delegate="targetItem = target"
to the div
in question. This works as expected – clicking the target box causes it to be highlighted – even without the app refresh like mentioned above.
mapping.ts
public class Mapping{
public draggedItem : any;
public targetItem : any;
public dragStart(event, source){
this.draggedItem = source;
this.targetItem = null;
return true;
}
public dragOver(event, target){
if(this.draggedItem){
event.preventDefault();
this.targetItem = target;
}
}
public dragDrop(event, target) {
if(this.draggedItem){
event.preventDefault();
this.targetItem = null;
target.sourceItem = this.draggedItem;
this.draggedItem = null;
}
}
public dragLeave(event, target) {
event.preventDefault();
if(this.targetItem == target)
this.targetItem = null;
}
mapping.html
<template>
<require from="./mapping.scss"></require>
<div class="container">
<div class="sources">
<div repeat.for="source of sources" dragstart.trigger="dragStart($event,source)">${source.name}</div>
</div>
<div class="targets">
<div class="targetGrid">
<template repeat.for="target of targets">
<div class="dropzone ${targetItem == target ? 'hover' : ''}"
dragover.trigger="dragOver($event,target)"
dragdrop.trigger="dragDrop($event, target)"
dragleave.trigger="dragLeave($event, target)">
${target.sourceItem.name}
</div>
<div>...</div>
<div>${target.name}</div>
</template>
</div>
</div>
</div>
</template>
mapping.css
.targetGrid {
display: grid;
grid-template-columns: auto 2.5em 1fr;
}
.dropzone {
border: 2px dotted lightgray;
}
.dropzone.hover {
border: 2px dotted rgba(101,141,27,1);
background-color: rgba(101,141,27,.5);
}