I'm try to embed event handling inside of marionette but I got kind of stuck as when I embed events I loose the marionette view object which i require to update the width of a div to create an interactive slider.
SliderBehavior = Marionette.Behavior.extend({
ui: {
slider: '.slider-pointer',
foregroundScale: '.slider-default',
},
events: {
'mousedown #ui.slider': 'onSliderDrag'
},
onSliderDrag: function(e) {
console.log(this);
var handlers = {
mousemove : function(e){
this.ui.foregroundScale.css({
width : utility.round((this.view.options.max - (e.pageX - this.view.options.offset)), this.view.options.min, this.view.options.max)+ 'px'
});
},
mouseup : function(e){
$(e.target).off(handlers);
}
};
this.$el.on(handlers);
}
});
So the problem is insde handlers >> mousemove >> the this object is representing the event how can I access my ui hash from inside this function.
Regards
Quick answer use $.proxy to inject your own scope
var handlers = {
mousemove : $.proxy(function(e){
this.ui.foregroundScale.css({
width : utility.round((this.options.max - (e.pageX - this.options.offset)), this.options.min, this.options.max)+ 'px'
});
}, this),
mouseup : $.proxy(function(e){
$(e.target).off(handlers);
}, this)
};
Try storing a reference to this in a variable outside of the handlers definition.
onSliderDrag: function(e) {
console.log(this);
var viewRef = this;
var handlers = {
mousemove : function(e){
viewRef.ui.foregroundScale.css({
width : utility.round((this.view.options.max - (e.pageX - this.view.options.offset)), this.view.options.min, this.view.options.max)+ 'px'
});
},
mouseup : function(e){
$(e.target).off(handlers);
}
};
this.$el.on(handlers);
}
Related
For mobile devices there is not action like right-clicking - so I want to handle a long press for this.
I also need a normal "click" event.
For the long-press handling I found a solution, but when I add an onClick-listener, the onClick gets fired even if I only want the long-press event to be fired.
How can I prevent the Click Event when the longTap event fires?
Here is the Code + example:
var c = console.log.bind(console);
(function() {
$.fn.longTap = function(options) {
options = $.extend({
delay: 1000,
onRelease: null
}, options);
var eventType = {
mousedown: 'ontouchstart' in window ? 'touchstart' : 'mousedown',
mouseup: 'ontouchend' in window ? 'touchend' : 'mouseup'
};
return this.each(function() {
$(this).on(eventType.mousedown + '.longtap', function() {
$(this).data('touchstart', +new Date);
})
.on(eventType.mouseup + '.longtap', function(e) {
var now = +new Date,
than = $(this).data('touchstart');
now - than >= options.delay && options.onRelease && options.onRelease.call(this, e);
});
});
};
})(jQuery);
$('.long-tap').longTap({
delay: 1000, // really long tap
onRelease: function(e) {
c($(this).position(), e);
e.stopImmediatePropagation();
e.preventDefault();
alert('show context menu or something else:');
}
});
$('.long-tap').click(function(){
alert("click");
})
.test {
width: 200px;
height: 100px;
background-color: #DDD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test long-tap"></div>
You can use contextmenu for right click event:
$(document).on("contextmenu",function(e){
e.preventDefault();
// do the stuff
});
When you long press with the finger in your mobile device then the context menu will appear.
There is really no good way to do such thing, what you can do is test if longtap event is registered on event target for click event handler:
$('.long-tap').click(function(){
if ($(this).data('touchstart')) {
return;
}
...
});
In general, I think your general approach to implement context menu for touch screen devices should be reconsidered.
Best of luck!
I've implemented a simple drag and drop system using directives in Angular. It works fine in Chrome, but Firefox doesn't expose event.clientX, event.clientY properties on drag event (They just refuse to fix it).
So I'm looking for a good alternative to expose these properties on drag event: the x,y coordinates are needed for visual feedback on drag event.
Code is here - check out in Chrome and Firefox to see the problem.
In Chrome, drag an item in the folders, you'll have the same item displayed as visual feedback following the mouse, not in Firefox (because Firefox doesn't support e.clientX and e.clientY in the drag event).
the problem is here (beginning line 45):
.on('drag', function(e) {
if (e.originalEvent.clientX) {
el.css({
'top': e.originalEvent.clientY + 10,
'left': e.originalEvent.clientX + 10
});
} else {
el.css('display', 'none');
}
});
So how can I get the mouse position on screen during a drag event, in Firefox (the angular way, I mean with directives, no global variable, or whatever)?
You can hook up to dragover on document -- clientX and clientY are exposed there.
Use functional closure to not populating global scope. Here is updated PLNKR (tested in Chrome and FF).
Changes to js:
.directive('mpDrag', function($timeout, $window, $document) {
// keeping coordinates private and
// shared among all instances of the directive
var mouseX, mouseY;
$document.on("dragover", function(event){
mouseX = event.originalEvent.clientX;
mouseY = event.originalEvent.clientY;
})
return {
...
link: function($scope, element, attrs) {
...
$timeout(function() {
...
.on('drag', function(e) {
// just use mouseX, mouseY directely here
// (btw. you should detect differently when to hide the element)
console.log(mouseX, mouseY);
if (e.originalEvent.clientX) {
el.css({
'top': mouseY,
'left': mouseX
});
} else {
el.css('display', 'none');
}
});
});
}
};
})
You must borrow drag coordinates from the document itself:
var dragX = 0,
dragY = 0;
element.on('dragstart', function(e) {
document.ondragover = function(event) {
event = event || window.event;
dragX = event.pageX,
dragY = event.pageY;
};
});
element.on('drag', function(e) {
el.css({
'top': dragY + 10,
'left': dragX + 10
});
});
Updated plunker
I have to move a div by clicking on it, clicking again I must stop the div in that position. Now the problem is: when I want to move again the div, does not activate the mousemove event ... how can I fix it?
$('.move_div').live('click', function() {
$('html').on('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$('div').css({'top': y, 'left': x});
});
$("html").live('click', function() {
$('html').off('mousemove');
});
});
var ele = '.move_adv';
var moveBool = false;
$(function () {
$('html').on('mousemove', function (e) {
console.log($(this).width());
if (moveBool == true) {
var x = e.pageX - $(ele).width()/2;
var y = e.pageY - $(ele).height()/2;
$(ele).css({
'top': y,
'left': x
});
}
});
});
$(ele).live('click', function () {
moveBool = !moveBool;
});
http://jsfiddle.net/6y24s/2/
The main logic is storing the 'moveability' state of the div in a boolean.
You would also like to refine the code more.
Fiddle here , if you want to keep your code then only thing you need to add is
event.stopPropagation();
When you click on the div the mousemove handler is added to the div. Then an event handler is added to the document that removes any mousemove event handlers.
You then move the mouse and the div follows, you click and the mousemove handler is deleted.
You click on the div again, a mousemove event handler is added, though then the click event handler from the document takes away the mousemove handler.
So whenever you click after the first two clicks the mousemove handler is simultaneously created and destroyed.
Also use .on() instead of .live()
.live() was deprecated in JQuery 1.7
I have a draggable <div> with a click event and without any event for drag,
but after I drag <div> the click event is apply to <div>.
How can prevent of click event after drag?
$(function(){
$('div').bind('click', function(){
$(this).toggleClass('orange');
});
$('div').draggable();
});
http://jsfiddle.net/prince4prodigy/aG72R/
FIRST attach the draggable event, THEN the click event:
$(function(){
$('div').draggable();
$('div').click(function(){
$(this).toggleClass('orange');
});
});
Try it here:
http://jsfiddle.net/aG72R/55/
With an ES6 class (No jQuery)
To achieve this in javascript without the help of jQuery you can add and remove an event handler.
First create functions that will be added and removed form event listeners
flagged () {
this.isScrolled = true;
}
and this to stop all events on an event
preventClick (event) {
event.preventDefault();
event.stopImmediatePropagation();
}
Then add the flag when the mousedown and mousemove events are triggered one after the other.
element.addEventListener('mousedown', () => {
element.addEventListener('mousemove', flagged);
});
Remember to remove this on a mouse up so we don't get a huge stack of events repeated on this element.
element.addEventListener('mouseup', () => {
element.removeEventListener('mousemove', flagged);
});
Finally inside the mouseup event on our element we can use the flag logic to add and remove the click.
element.addEventListener('mouseup', (e) => {
if (this.isScrolled) {
e.target.addEventListener('click', preventClick);
} else {
e.target.removeEventListener('click', preventClick);
}
this.isScrolled = false;
element.removeEventListener('mousemove', flagged);
});
In the above example above I am targeting the real target that is clicked, so if this were a slider I would be targeting the image and not the main gallery element. to target the main element just change the add/remove event listeners like this.
element.addEventListener('mouseup', (e) => {
if (this.isScrolled) {
element.addEventListener('click', preventClick);
} else {
element.removeEventListener('click', preventClick);
}
this.isScrolled = false;
element.removeEventListener('mousemove', flagged);
});
Conclusion
By setting anonymous functions to const we don't have to bind them. Also this way they kind of have a "handle" allowing s to remove the specific function from the event instead of the entire set of functions on the event.
I made a solution with data and setTimeout. Maybe better than helper classes.
<div id="dragbox"></div>
and
$(function(){
$('#dragbox').bind('click', function(){
if($(this).data('dragging')) return;
$(this).toggleClass('orange');
});
$('#dragbox').draggable({
start: function(event, ui){
$(this).data('dragging', true);
},
stop: function(event, ui){
setTimeout(function(){
$(event.target).data('dragging', false);
}, 1);
}
});
});
Check the fiddle.
This should work:
$(function(){
$('div').draggable({
start: function(event, ui) {
$(this).addClass('noclick');
}
});
$('div').click(function(event) {
if ($(this).hasClass('noclick')) {
$(this).removeClass('noclick');
}
else {
$(this).toggleClass('orange');
}
});
});
DEMO
You can do it without jQuery UI draggable. Just using common 'click' and 'dragstart' events:
$('div').on('dragstart', function (e) {
e.preventDefault();
$(this).data('dragging', true);
}).on('click', function (e) {
if ($(this).data('dragging')) {
e.preventDefault();
$(this).data('dragging', false);
}
});
You can just check for jQuery UI's ui-draggable-dragging class on the draggable. If it's there, don't continue the click event, else, do. jQuery UI handles the setting and removal of this class, so you don't have to. :)
Code:
$(function(){
$('div').bind('click', function(){
if( $(this).hasClass('ui-draggable-dragging') ) { return false; }
$(this).toggleClass('orange');
});
$('div').draggable();
});
With React
This code is for React users, checked the draggedRef when mouse up.
I didn`t use click event. The click event checked by the mouse up event.
const draggedRef = useRef(false);
...
<button
type="button"
onMouseDown={() => (draggedRef.current = false)}
onMouseMove={() => (draggedRef.current = true)}
onMouseUp={() => {
if (draggedRef.current) return;
setLayerOpened(!layerOpened);
}}
>
BTN
</button>
I had the same problem (tho with p5.js) and I solved it by having a global lastDraggedAt variable, which was updated when the drag event ran. In the click event, I just checked if the last drag was less than 0.1 seconds ago.
function mouseDragged() {
// other code
lastDraggedAt = Date.now();
}
function mouseClicked() {
if (Date.now() - lastDraggedAt < 100)
return; // its just firing due to a drag so ignore
// other code
}
I am working on this project: http://www.arbamedia.com/test/
if you go to Dyer dhe dritare on the left menu and drag one of the elements (the door or the window) into the right side (the desk) in Chrome and FF the 3 options that I have added for that elements show, so this: $("p", this).show(); works, but in IE9 when I drag an element it doesn't show the the options for dragging, rotating or deleting! I dont know what is wrong.
This is where it happens:
$(".drag").draggable({
revert : 'invalid',
helper : 'clone',
containment : 'desk',
cursorAt : { left:-11,top:-1 },
//When first dragged
stop : function(ev, ui) {
/*========================================================================*/
var pos = $(ui.helper).offset();
var left_ = ev.originalEvent.pageX - $("#desk").position().left;
var top_ = ev.originalEvent.pageY - $("#desk").position().top;
// get widht and height of the container div#desk element
var w_ = $("#desk").width();
var h_ = $("#desk").height();
objName = "#clonediv"+counter++;
objNamex = "clonediv"+counter;
$(objName).css({"left":left_,"top":top_});
var gag = 0;
$(objName).click(function () {
$("p", this).show();
$(this).addClass("selektume");
$('.rotate_handle').unbind('click');
$('.rotate_handle').click(function(){
gag += 45;
$('.selektume').rotate(gag+'deg');
});
$('.delete_handle').click(function() {
$('.selektume').remove();
});
return false;
});
$(document).click(function () {
$("p").hide();
$(".lgutipT").removeClass("selektume");
});
//check if dropped inside the conteiner div#des
if((left_ >= 0) && (left_ <= w_) && (top_ >= 0) && (top_ <= h_))
{
$(objName).css({"left":left_,"top":top_});
// assign a z-index value
zindex = left_ + top_;
$(objName).css({"z-index":zindex});
$(objName).addClass("lgutipT");
//$(objName).addClass("ui-widget-content");
$(objName).removeClass("drag");
$(objName).append('<p><img class="handler" src="images/move_button.png"><img class="rotate_handle" src="images/rotate_button.png"><img class="delete_handle" src="images/delete_button.png"></p>');
$("p", this).show();
}
/*========================================================================*/
//When an existiung object is dragged
$(objName).draggable({
containment : "#desk",
handle : ".handler",
cursor : "move"
});
}
});
Very tricky problem since there's no good documentation on how jQuery UI treats events at a core level. The solution was to unbind and rebind the click event. In IE, the click event is treated differently than other browsers. The solution was simply to rebind the click event after everything is done (1/1000 of a second delay).
My solution was to move the click event, add an unbinding on drag start, and to add a setTimeout() on rebinding the $(document).click() event listener when drag was complete.
View the source below to view the working solution.
http://jsfiddle.net/MattLo/AbF6t/
Copy and Paste the HTML to your dev environment.