Can methods be called through variables? I have drag and drop elements with IDs, and based on the ID, I need to call a specific method. For example:
<template>
<div>
<div id="draggable">
<div class="draggable" id="db">Step2</div>
<div class="draggable" id="spstep"> Step</div>
<div class="draggable" id="merge">Merge</div>
<div class="draggable" id="copy">copy</div>
</div>
<div id="id="draggable"">Drop Here</div>
</div>
</template>
<script>
export default {
data () {
}
mounted () {
var _this = this
$(".draggable").draggable({
grid: [ 20, 20 ],
appendTo: '#droppable',
// containment: "window",
cursor: 'move',
revertDuration: 100,
revert: 'invalid',
helper: 'clone',
refreshPositions: true,
scroll: true,
containment: "document",
zIndex: 10000,
});
$("#droppable").droppable({
accept: ".draggable",
tolerance: "intersect",
drop: function (event, ui) {
var leftPosition = pos.left;//ui.offset.left - $(this).offset().left;
var topPosition = pos.top;//ui.offset.top - $(this).offset().top;
console.log(leftPosition + " "+ topPosition);
var type = ui.draggable.attr("id");
if(type == 'db')
_this.db()
if(type == 'spstep')
_this.spstep()
if(type == 'merge')
_this.merge()
if(type == 'copy')
_this.copy()
// _this.[type]() // Syntax error
}
});
}
methods: {
db(){
//do something for db
}
spstep(){
//do something for spstep
}
merge(){
//do something for merge
}
copy(){
//do something for copy
}
}
</script>
<style>
</style>
In the provided sample code, the desired functionality is outlined in the comments. It aims to call methods based on the dragged element's ID. While the exact implementation might not be correct, it serves as a way to streamline the code effectively.
Any assistance or advice on improving this approach would be greatly appreciated.
Thank you