Develop Reference

How do I get the mousemove event to function correctly inside a vue component?

I'm new to vue.js and trying to build a component which triggers a popup which will follow the mouse position when hovering over an element. The problem is that the mouse position is only logged when entering/leaving the element instead of everytime the mouse is moved within the element. How would I get this to work correctly?
<template>
<div>
<div class="hover" #mouseenter="mouseEnter" #mouseleave="mouseLeave"></div>
<div class="popup" v-if="popup">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {
popup: false
}
},
methods: {
mouseEnter() {
console.log('mouseneter');
this.popup = true;
this.$el.addEventListener('mousemove', this.mouseMove());
},
mouseLeave() {
console.log('mouseleave');
this.popup = false;
this.$el.removeEventListener('mousemove', this.mouseMove());
},
mouseMove() {
console.log(event.clientX, event.clientY);
}
}
}
</script>
<style lang="scss" scoped>
.hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.popup {
position: absolute;
top: 0;
left: 100%;
}
</style>

<template>
<div>
<div class="hover" #mouseenter="mouseEnter" #mousemove="mouseMove" #mouseleave="mouseLeave"></div>
<div class="popup" v-if="popup">
<slot></slot>
</div>
</div>
<script>
export default {
data() {
return {
popup: false
}
},
methods: {
mouseEnter(event) {
console.log('mouseneter');
this.popup = true;
this.$el.addEventListener('mousemove', this.mouseMove, false);
},
mouseLeave(event) {
this.popup = false;
// this.$el.removeEventListener('mousemove', this.mouseMove());
},
mouseMove(event) {
console.log(event.clientX, event.clientY);
}
}
}

User native mousemove event --
<div>
<div id="elementId" class="hover" #mouseenter="mouseEnter" #mousemove="mousemove" #mouseleave="mouseLeave"></div>
<div id="popup" class="popup" v-if="popup">
<slot></slot>
</div>
</div>
export default {
data() {
return {
popup: false
}
},
mounted:function(){
document.getElementById("elementId").addEventListener('mousemove', function(event){
console.log(event.screenX + '-' + event.screenY);
// change the position of popup here by changing top and left property -
document.getElementById('popup').style.top = event.screenY+'px';
document.getElementById('popup').style.left = event.screenX+'px';
});
},
methods: {
mouseEnter(event) {
console.log('mouseneter');
this.popup = true;
this.$el.addEventListener('mousemove', this.mouseMove, false);
},
mouseLeave(event) {
this.popup = false;
// this.$el.removeEventListener('mousemove', this.mouseMove());
},
mouseMove(event) {
console.log(event.clientX, event.clientY);
}
}
}

Do not run jQuery function when <a> tag clicked

I currently work with some jQuery, where i have got some problems.
I got this code
if ($(".accordion").length > 0) {
$(".accordion").each(function() {
var item = $(this).find(".accordion-text");
var height = item.outerHeight() + 20;
item.data("height", height + "px").css("height", "0px");
})
}
$(".accordion").on("click", function(e) {
foldOut($(this));
});
function foldOut(accordien) {
console.log(accordien);
var item = $(accordien).find(".accordion-text");
if ($(accordien).hasClass("accordion-open")) {
$(item).stop().transition({
height: '0px'
}, 500, 'in-out');
$(accordien).find(".accordionArrow").removeClass("accordionBgActive");
console.log($(accordien).find(".accordionArrow"));
} else {
$(accordien).find(".accordionArrow").addClass("accordionBgActive");
$(item).stop().transition({
height: item.data("height")
}, 500, 'in-out');
}
$(accordien).toggleClass("accordion-open");
}
But inside the div that is folding out, there may be an a tag, and when i click on the a tag it opens the link but also folds the div..
How can i get the div not to fold when the click is on an a tag?
HTML Where its "closed"
<div class="row">
<div class="overflow-hide rel">
<div class="accordion rel col-md-12 no-pad">
<div class="accordionHeaderDiv">
<h3>Test</h3>
<div class="accordion-header-teaser">
<p>TestTestTestTestTestTestTestTestTestTest</p>
</div>
</div>
<div class="accordion-text" style="height: 0px;">
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>Test</p>
</div>
<div class="accordionArrow" style=" position: absolute; top: 0; cursor: pointer; right: 43px; height: 30px;"></div>
</div>
<div class="clearfix"></div>
</div>
</div>

Filter it out regarding event target:
$(".accordion").on("click", function(e) {
if(e.target.tagName.toLowerCase() === "a") return;
foldOut($(this));
});
As anchor can contains other contents, a more relevant way would be:
$(".accordion").on("click", function (e) {
if ($(e.target).closest('a').length) return;
foldOut($(this));
});

Hover in/out makes my div flicker

I am trying to make a flowing-down div. I have the following jQuery code for them:
$(".centered-wrapper>main>.event").hoverIntent({
over: function() {
var pos = $(this).position();
$presentationEvent = $(this);
$fullEvent = $(this).clone();
$fullEvent.addClass("full");
$(this).css("visibility", "hidden");
$fullEvent.css({
position: "absolute",
top: pos.top,
left: pos.left
});
$(".centered-wrapper>main").append($fullEvent);
$fullEvent.find("main").slideDown(50, function() {
$fullEvent.find("footer").slideDown(50);
});
$fullEvent.animate({boxShadow: "0px 5px 5px 0px rgba(0,0,0,0.5);"}, 100);
console.log( $(".centered-wrapper>main>.event.full"));
$(".centered-wrapper>main>.event.full").on("mouseout", function() {
$(this).find("main, footer").slideUp(100);
$(this).remove();
$presentationEvent.css("visibility", "visible");
});
},
out: function() {}
});
Everything works well until I move my cursor up and down on that element, because, then it flickers and appears and disappears...
<div class="event">
<header>
<img class="photo" src="/res/users/events-photos/bal.jpg" alt=""/>
<div class="event-card">
<div class="date">
<!-- content -->
</div>
</header>
<main>
<!-- content -->
</main>
<footer>
<!-- content -->
</footer>
</div>
How can I solve this problem and where am I wrong?

You need to disable multiple queued animations. The best way to achieve this is to stop() it.
http://api.jquery.com/stop/
According to documentation:
$( "#hoverme-stop-2" ).hover(function() {
$( this ).find( "img" ).stop( true, true ).fadeOut();
}, function() {
$( this ).find( "img" ).stop( true, true ).fadeIn();
});
In your case:
$fullEvent.find("main").stop(true,true).slideDown(50, function() {
$fullEvent.find("footer").stop(true,true).slideDown(50);
});
and:
$(this).find("main, footer").stop(true,true).slideUp(100);

The visibility hidden code interferes with element hover and causes the flicker. Use another way to hide it. Like
.event:hover
{
opacity: 0;
}
To avoid events from firing use 'pointer-events: none;'
.event:hover
{
opacity: 0;
pointer-events: none;
}

Jquery drag resize select

I am using Jqueryui drag resize select all together drag and resize is working fine but select is not working fine .
JSFiddle
My code is:-
CSS-
.dr {
background: none repeat scroll 0 0 #63F;
color: #7B7B7B;
height: 50px;
text-shadow: 1px 1px 2px #FFFFFF;
width: 50px;
position:absolute;
}
.bg_section {
border: 1px solid #E4E3E3;
height: 290px;
margin: 48px auto 0;
position: relative;
width: 400px;
}
JS-
$(document).ready(function(){
var selected = $([]), offset = {top:0, left:0};
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function() {
section = $( "#section" ).val();
divid = $( "#divdata" ).val();
divstring="<div class='dr' id='"+divid+"'>"+divid+"</div>";
// $( ".add" ).appendTo( $( "#"+section) );
$( divstring ).appendTo( $( "."+section) );
$( "."+section).selectable();
$("#divdata option[value="+ divid+"]").remove();
$("#"+divid).draggable({
containment: "."+section,
grid: [ 10, 10 ],
start: function(ev, ui) {
if ($(this).hasClass("ui-selected")){
selected = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
});
}
else {
selected = $([]);
$(".dr").removeClass("ui-selected");
}
offset = $(this).offset();
},
drag: function(ev, ui) {
var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
// take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
selected.not(this).each(function() {
// create the variable for we don't need to keep calling $("this")
// el = current element we are on
// off = what position was this element at when it was selected, before drag
var el = $(this), off = el.data("offset");
el.css({top: off.top + dt, left: off.left + dl});
});
},
stop: function(e, ui) {
var Stoppos = $(this).position();
var leftPos=Stoppos.left;
var topPos= Stoppos.top;
var dragId=ui.helper[0].id;
// alert(leftPos/10);
// alert(topPos/10);
// alert(dragId);
sectionWidth= $('#'+dragId).parent().width();
sectionHeight = $('#'+dragId).parent().height();
},
}).resizable({
containment: "."+section,
grid: [10,10],
start: function(e, ui) {
// alert($(".paper-area").width());
//containment: ".paper-area",
$(this).css({
// position: "absolute",
});
},
stop: function(e, ui) {
// containment: ".paper-area",
$(this).css({
// position: "absolute",
});
}
});
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
}
});
$( "body" ).on( "click", ".dr", function(e) {
if (e.metaKey == false) {
// if command key is pressed don't deselect existing elements
$( ".dr" ).removeClass("ui-selected");
$(this).addClass("ui-selecting");
}
else {
if ($(this).hasClass("ui-selected")) {
// remove selected class from element if already selected
$(this).removeClass("ui-selected");
}
else {
// add selecting class if not
$(this).addClass("ui-selecting");
}
}
$( ".bg_section" ).data(".bg_section")._mouseStop(null);
});
$(".add").click(function() {
$( "#dialog-form" ).dialog( "open" );
$("#new_field").hide();
$("#save_new").hide();
});
$(".add_new").click(function() {
$(".add_new").hide();
$("#new_field").show();
$("#save_new").show();
});
$("#save_new").click(function() {
$( "#divdata" ).append($('<option>', {
value: $("#new_field").val(),
text: $("#new_field").val(),
class:'add',
}));
$("#new_field").hide();
$("#save_new").hide();
$(".add_new").show();
});
})
HTML-
<div id="dialog-form" title="Add fields in Section">
<p class="validateTips">All form fields are required.</p>
<div class="add_new">Add</div>
<input type="text" id="new_field"/>
<div id="save_new">save</div>
<form>
<fieldset>
<label for="divdata">Divs</label>
<select name="divdata" id="divdata">
<option value="dr1">Div1</option>
<option value="dr2">Div2</option>
<option value="dr3">Div3</option>
<option value="dr4">Div4</option>
<option value="dr5">Div5</option>
</select>
</br>
<label for="section">Section</label>
<select name="section" id="section">
<option value="paper-area">Header</option>
<option value="paper-area-detail">Detail</option>
<option value="paper-area-qty">Items</option>
<option value="paper-area-sub">Total</option>
<option value="paper-area-footer">Footer</option>
</select>
</fieldset>
</form>
</div>
<div class="main_bg">
<div class="textarea-top">
<div class="textarea-field">
<div class="field-icon add"><img src="<?php echo Yii::app()->baseUrl;?>/images/bill_add-field-icon.png" alt="add" border="0" width="29" height="25" /></div>
</div>
<div class="paper-area bg_section" id="paper_area">
</div>
<div class="paper-area-detail bg_section">
</div>
<div class="paper-area-qty bg_section">
</div>
<div class="paper-area-sub bg_section">
</div>
<div class="paper-area-footer bg_section"></div>
</div>
I am using drag-select for drag resize.Any help should be Appreciated.

Seems like a strange bug/conflict with jquery ui dragable and/or resizeable. Only some parts of selectable are working in combination with these other two functions. If you inspect the elements which have all three functions and you try to select one of them it only gets the "ui-selecting" class, which is a timeout class and option from selectable but stoping there. Normally the classes are replaced in this way:
ui-selectee
ui-selecting
ui-selected.
If you remove the drag- and resizeable functions the selectable stuff is working normally (but there still other bugs in your code)
I guess it is possible to combine all these function, but you will have to play around with the options and callbacks to get it working like you want to. Maybe not everything you want is possible becouse of these conflicts.

The easiest way to resize is by using resize:both; , max-height:__px; , max-width:__px; in CSS

Indeed it seems that jquery ui draggable and selectable don't work that nice together. However other people have posted solutions. Please look at the following,
http://words.transmote.com/wp/20130714/jqueryui-draggable-selectable/
http://jsfiddle.net/6f9zW/light/ (this is from the article above)
Since it seems as a nice working solution that examines the state when dragging and selecting, i will also post it below in case the site goes down.
JS
// this creates the selected variable
// we are going to store the selected objects in here
var selected = $([]), offset = {top:0, left:0};
$( "#selectable > div" ).draggable({
start: function(ev, ui) {
if ($(this).hasClass("ui-selected")){
selected = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
});
}
else {
selected = $([]);
$("#selectable > div").removeClass("ui-selected");
}
offset = $(this).offset();
},
drag: function(ev, ui) {
var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
// take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
selected.not(this).each(function() {
// create the variable for we don't need to keep calling $("this")
// el = current element we are on
// off = what position was this element at when it was selected, before drag
var el = $(this), off = el.data("offset");
el.css({top: off.top + dt, left: off.left + dl});
});
}
});
$( "#selectable" ).selectable();
// manually trigger the "select" of clicked elements
$( "#selectable > div" ).click( function(e){
if (e.metaKey == false) {
// if command key is pressed don't deselect existing elements
$( "#selectable > div" ).removeClass("ui-selected");
$(this).addClass("ui-selecting");
}
else {
if ($(this).hasClass("ui-selected")) {
// remove selected class from element if already selected
$(this).removeClass("ui-selected");
}
else {
// add selecting class if not
$(this).addClass("ui-selecting");
}
}
$( "#selectable" ).data("selectable")._mouseStop(null);
});
// starting position of the divs
var i = 0;
$("#selectable > div").each( function() {
$(this).css({
top: i * 42
});
i++;
});
CSS
#selectable .ui-selecting {background: #FECA40;}
#selectable .ui-selected {background: #F39814; color: white;}
#selectable {margin: 0; padding: 0; height: 300px; position: relative; padding:0; border:solid 1px #DDD;}
#selectable > div {position: absolute; margin: 0; padding:10px; border:solid 1px #CCC; width: 100px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}
HTML
<div id="selectable">
<div class="ui-widget-content">Item 1</div>
<div class="ui-widget-content">Item 2</div>
<div class="ui-widget-content">Item 3</div>
<div class="ui-widget-content">Item 4</div>
<div class="ui-widget-content">Item 5</div>
</div>
Other threads describing similar problem and solutions,
Is there a JQuery plugin which combines Draggable and Selectable
jQuery UI : Combining Selectable with Draggable

I have found A solution Now we can use *Drag-Resize-Select -*together
Example-
code:-
CSS:-
.ui-selecting {background: #FECA40;}
.ui-selected {background: #F39814; color: white;}
.bg_section {margin: 0; padding: 0; height: 300px; position: relative; padding:0; border:solid 1px #DDD;}
.bg_section > div {position: absolute; margin: 0; padding:10px; border:solid 1px #CCC; width: 100px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}
JS:-
var selected = $([]); // list of selected objects
var lastselected = ''; // for the shift-click event
$(document).ready(function(){
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function() {
section = $( "#section" ).val();
divid = $( "#divdata" ).val();
divstring="<div class='dr' id='"+divid+"'>"+divid+"</div>";
// $( ".add" ).appendTo( $( "#"+section) );
$( divstring ).appendTo( $( "."+section) );
$("#divdata option[value="+ divid+"]").remove();
$("#"+divid).draggable({
containment: "."+section,
grid: [ 10, 10 ],
start: function(ev, ui) {
$(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
selected = $(".ui-selected").each(function() {
$(this).addClass("dragging");
});
},
drag: function(ev, ui) {
},
stop: function(e, ui) {
selected.each(function() {
$(this).removeClass("dragging");
});
var Stoppos = $(this).position();
var leftPos=Stoppos.left;
var topPos= Stoppos.top;
var dragId=ui.helper[0].id;
// alert(leftPos/10);
// alert(topPos/10);
// alert(dragId);
sectionWidth= $('#'+dragId).parent().width();
sectionHeight = $('#'+dragId).parent().height();
},
}).resizable({
containment: "."+section,
grid: [10,10],
start: function(e, ui) {
// alert($(".paper-area").width());
//containment: ".paper-area",
$(this).css({
// position: "absolute",
});
},
stop: function(e, ui) {
// containment: ".paper-area",
$(this).css({
// position: "absolute",
});
}
});
$("#paper_area").selectable();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
}
});
$( "body" ).on( "click", ".dr", function(evt) {
id = $(this).attr("id");
// check keys
if ((evt.shiftKey) && (lastselected != '')) {
// loop all tasks, select area from this to lastselected or vice versa
bSelect = false;
$(".task").each(function() {
if ($(this).is(':visible')) {
if ($(this).attr("id") == id || $(this).attr("id") == lastselected)
bSelect = !bSelect;
if (bSelect || $(this).attr("id") == lastselected || $(this).attr("id") == lastselected) {
if (!$(this).hasClass("ui-selected"))
$(this).addClass("ui-selected");
}
else
$(this).removeClass("ui-selected");
}
});
return;
}
else if (!evt.ctrlKey)
$(".ui-selected").removeClass("ui-selected"); // clear other selections
if (!$(this).hasClass("ui-selected")) {
$(this).addClass("ui-selected");
lastselected = id;
}
else {
$(this).removeClass("ui-selected");
lastselected = '';
}
});
$(".add").click(function() {
$( "#dialog-form" ).dialog( "open" );
$("#new_field").hide();
$("#save_new").hide();
});
$(".add_new").click(function() {
$(".add_new").hide();
$("#new_field").show();
$("#save_new").show();
});
$("#save_new").click(function() {
$( "#divdata" ).append($('<option>', {
value: $("#new_field").val(),
text: $("#new_field").val(),
class:'add',
}));
$("#new_field").hide();
$("#save_new").hide();
$(".add_new").show();
});
})

jquery draggable for multiple divisions

The Drag works properly in the first division but is not working properly in the next one. I need to get it working without changing the div Id/Class name.
Fiddle here: JS Fiddle
HTML:
<div class="track">
<div id="rocket">
</div>
</div>
<br><br><div style="clear:both">
<div class="track">
<div id="rocket">
</div>
</div>
​
CSS:
.track {
height: 400px;
width: 48px;
overflow: hidden;
margin: 10px 0 0 10px;
float:left;
background: #ccc;
}
#rocket{
height:48px;
width:48px;
background: url('http://cdn1.iconfinder.com/data/icons/Symbolicons_Transportation/48/Rocket.png');
position:relative;
top:352px;
}
​
Jquery :
$(document).ready(function() {
$('.track').each(function(){
//rocket drag
$(this).children("#rocket").draggable({
containment: ".track",
axis: "y",
scroll: false,
start: function(event, ui) {
draggingRocket = true;
},
drag: function(event, ui) {
// Show the current dragged position of image
},
stop: function(event, ui) {
draggingRocket = false;
}
});
});
});​

here is the fiddle...
http://jsfiddle.net/zHyA9/30/
1) id should always be unique... so chnaged ur ids to class..
2) added containment: $(this), in ur draggable class

You need to change some thing in html code.
<div class="track">
<div id="rocket">
</div>
</div>
<div style="clear:both">
<div class="track">
<div id="rocket">
</div>
</div>
Here the fiddle: fiddle

You need several changes in your html as well as js code.
Refer this fiddle.
JS:
$(document).ready(function() {
$('.track').live("hover",function(){
//rocket drag
$(this).children(".rocket").draggable({
containment: this,
axis: "y",
scroll: false,
start: function(event, ui) {
draggingRocket = true;
},
drag: function(event, ui) {
// Show the current dragged position of image
},
stop: function(event, ui) {
draggingRocket = false;
}
});
});
});​