Wie löst man ein Anweisungsereignis nach dem Anhängen eines Elements aus?

Question

Wie kann ich das Ereignis mousedown direkt nach dem Hinzufügen eines Elements auslösen?

Ich möchte, dass das neu hinzugefügte Element direkt nach dem Hinzufügen gezogen wird (und vermeiden, es erneut anklicken zu müssen, um es zu ziehen).

Also nach append(element) das Element I trigger('mousedown'), das ist ein gültiges Ereignis in meiner Direktive, aber es heißt nicht. Gibt es ein Timing-Problem?

Ich habe versucht, das trigger Ereignis in einem setTimeout (wie es in AngularJS empfohlen wird) zu kapseln, aber es funktioniert nicht.

Hier ist ein JSFiddle

Hinweis: Es ist ein Fehler im Code-Schnipsel von SO, ich weiß nicht, warum. Ich empfehle Ihnen, das JSFiddle zu verwenden.

Vue.directive('draggable-copy', { 
 
    bind: function() { 
 
    var el = this.el; 
 

 
    el.addEventListener("mousedown", function(e) { 
 
     e.preventDefault(); 
 

 
     var clone = $(el).clone(); 
 
     var posX = e.pageX - (100/2) - $(el).parent('svg').position().left; 
 
     var posY = e.pageY - (50/2) - $(el).parent('svg').position().top; 
 
     clone.attr('transform', 'translate(' + posX + ',' + posY + ')'); 
 
     clone.attr('v-drag', ''); 
 
     var compiledElement = vm.$compile(clone[0]); 
 

 
     console.log(clone[0]) 
 

 
     $('#palet').append(clone[0]); 
 
     setTimeout(function() { 
 
     \t // THIS DOESN'T GET TRIGGERED 
 
     clone.trigger('mousedown'); 
 
     }); 
 
    }); 
 
    } 
 
}); 
 

 
Vue.directive('drag', { 
 
    bind: function() { 
 
    var el = this.el; 
 
    var startX = 0, 
 
     startY = 0; 
 
    var x, y; 
 

 
    el.addEventListener("mousedown", function(e) { 
 
     console.log('mousedown') 
 
     startX = 100/2; 
 
     startY = 50/2; 
 

 
     $(document).on("mousemove", mousemove); 
 
     $(document).on("mouseup", mouseup); 
 
    }); 
 

 
    function mousemove(e) { 
 
     x = e.pageX - startX - $(el).parent('svg').position().left; 
 
     y = e.pageY - startY - $(el).parent('svg').position().top; 
 

 
     $(el).attr('transform', 'translate(' + x + ',' + y + ')'); 
 
    } 
 

 
    function mouseup() { 
 
     $(document).off("mousemove", mousemove); 
 
     $(document).off("mouseup", mouseup); 
 
     $(el).remove(); 
 
    } 
 
    } 
 
}); 
 

 
var vm = new Vue({ 
 
    el: '#container' 
 
});

svg { 
 
    border: 1px solid black; 
 
} 
 

 
.node:hover { 
 
    cursor: pointer; 
 
} 
 
.node:hover .split { 
 
    fill: #F7ED5D; 
 
} 
 
.node .split { 
 
    fill: #FDFFAB; 
 
    stroke: #F7ED5D; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <svg id="palet" height="250" width="250"> 
 
    <g class="node" transform="translate(0, 75)" v-draggable-copy> 
 
     <polygon points="50,0 100,25 50,50 0,25" class="split" /> 
 
     <text x="35" y="30">Split</text> 
 
    </g> 
 
    </svg> 
 
</div>

Answer 1

Hier ist die Lösung, die ich verwendet:

• ich die Gruppe <g> duplizieren.
• Den obigen einen ziehbaren machen v-drag.
• Schließlich, wenn das gezogene Element in mouseup freigegeben, ich es in seiner ursprünglichen Position neu positionieren.

JSFiddle

Vue.directive('drag', { 
 
    bind: function() { 
 
    var el = this.el; 
 
    var initialX, initialY; 
 
    var startX, startY; 
 
    var x, y; 
 

 
    el.addEventListener("mousedown", function(e) { 
 
    \t e.preventDefault(); 
 
     console.log('mousedown') 
 
     var transformPosition = $(el).attr("transform").match(/\d+/g); 
 
\t \t \t 
 
    \t initialX = transformPosition[0]; 
 
     initialY = transformPosition[1]; 
 
     startX = 100/2; 
 
     startY = 50/2; 
 

 
     $(document).on("mousemove", mousemove); 
 
     $(document).on("mouseup", mouseup); 
 
    }); 
 

 
    function mousemove(e) { 
 
    \t e.preventDefault(); 
 
     x = e.pageX - startX - $(el).parent('svg').position().left; 
 
     y = e.pageY - startY - $(el).parent('svg').position().top; 
 

 
     $(el).attr('transform', 'translate(' + x + ',' + y + ')'); 
 
    } 
 

 
    function mouseup() { 
 
     $(document).off("mousemove", mousemove); 
 
     $(document).off("mouseup", mouseup); 
 
     $(el).attr('transform', 'translate(' + initialX + ',' + initialY + ')'); 
 
    } 
 
    } 
 
}); 
 

 
var vm = new Vue({ 
 
    el: '#container' 
 
});

svg { 
 
    border: 1px solid black; 
 
} 
 

 
.node:hover { 
 
    cursor: pointer; 
 
} 
 
.node:hover .split { 
 
    fill: #F7ED5D; 
 
} 
 
.node .split { 
 
    fill: #FDFFAB; 
 
    stroke: #F7ED5D; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <svg id="palet" height="250" width="250"> 
 
    <g class="node" transform="translate(0, 75)"> 
 
     <polygon points="50,0 100,25 50,50 0,25" class="split" /> 
 
     <text x="35" y="30">Split</text> 
 
    </g> 
 
    <g class="node" transform="translate(0, 75)" v-drag> 
 
     <polygon points="50,0 100,25 50,50 0,25" class="split" /> 
 
     <text x="35" y="30">Split</text> 
 
    </g> 
 
    </svg> 
 
</div>