MooTools custom drag event - javascript

Is there anyway to define a drag event in MooTools using the mousedown, mouseup and mousemove events. I would like to be able to do something like the following:
$('#knob').addEvent('drag', function (e) {
// Drag event code goes here...
});


Dragging
Although Mootools has implemented all you need for drag, drop, slide and similar effects, writing your own event is a good way to learn how events work. Here is an example of how to add additional custom event by using the Element.Events Object.
Effect starts on mousedown event that registers mousemove event. When dragging is over mouseup event is fired that removes the mousemove event listener.
Since it can happen that mouse leaves the box (mouseup is not fired to clean up), mouseout event is added also.
At every step of the effect, drag event handler is launched with the original event object passed as argument, You can see the type of the original event with console.log( e.type );
window.addEvent( 'domready', function() {;
Element.Events.drag = {
// the function that will get fired when the custom event is added
onAdd: function() {
this.addEvents({
mousedown: function(e) {
this.store( 'x', e.page.x - this.getPosition().x );
this.store( 'y', e.page.y - this.getPosition().y );
this.addEvents({
mousemove: function(e) {
this.setPosition({
x: e.page.x - this.retrieve( 'x' ),
y: e.page.y - this.retrieve( 'y' )
});
this.fireEvent( 'drag', e );
},
mouseout: function(e) {
this.fireEvent( 'mouseup', e );
}
});
},
mouseup: function(e) {
this.removeEvents( 'mousemove' );
this.removeEvents( 'mouseout' );
this.fireEvent( 'drag', e );
}
});
},
// the function that will get fired when the custom event is removed
onRemove: function() {
this.removeEvents( 'mousedown' );
this.removeEvents( 'mouseup' );
}
};
$('draggable').addEvent( 'drag', function( e ) {
console.log( e.type );
});
// $('draggable').removeEvents( 'drag' );
});
A few good articles about Mootools events:
mootools.net
ryanflorence.com

Related

How can i unbind for specific jquery scroll event?

I am having scroll event.
this.todayScrollerRef = $(window).scroll(() => {
console.log('some stuff');
});
On button click i want to unbind from the event
So when i try
$(window).unbind('scroll');
it works - and i don't get some stuff in console when i am scrolling after the button click.
But because i have another window.scroll event i don't want to use $(window).unbind('scroll');
because it unbinds all of the scroll events.
So i want to unbind specific one - and when i try
$(window).unbind('scroll', this.todayScrollerRef);
for my created todayScrollerRef reference - it does not work.
Scroll event is not destroyed
I also tried with
$(window).on('scroll', this.todayScroller.bind(this));
todayScroller() {
console.log('some stuff');
}
// on btn click
$(window).off('scroll', this.todayScroller.bind(this));
and it still does not work.
Where is my mistake ?

Have your handler like this:
this.todayScrollerRef = function() {
console.log('sd');
};
to Bind
$( window).bind( "scroll", this.todayScrollerRef );
to unbind:
$(window).unbind( "scroll", this.todayScrollerRef );

How can I trigger mouse up at the specific position

I tried to trigger mousedown event at the specific position using jQuery.
What I need is to implement mousedown event at the specified coordinates and mouseup event also.
So I am going to implement mouse drag event automatically when I click any button.
Is it possible on canvas?
This is my attempt
$('#clickMe').click(function() {
$("#map-canvas").trigger("mousedown", { which: 1, pageX: 1057, pageY: 770 });
$("#map-canvas").trigger("mouseup", { which: 1, pageX: 370, pageY: 541 });
$("#map-canvas").off("mousedown").on("mousedown", function (e) {
console.log('#### DEBUG CLICK: ', e);
});
$("#map-canvas").off("mouseup").on("mouseup", function (e) {
console.log('#### DEBUG CLICK EVENT: ', e); // fixme
});
});
Trigger`s action is okay.
But I can not mousedown event at the expectation position.
How can I implement it?
Thanks.

Drag event prevent mouse event

When I'm select text and start to drag selections, mouse event like a wheel or mousemove doesn't fire. How I can catch an event while dragging?
I create a test example to check this issue, you can see it here:
https://jsfiddle.net/prevolley/3q7xwa8p/4/
<p>dasdasdasdas</p>
document.addEventListener('wheel', (event) => {
console.log('wheel', event.deltaY);
});
document.addEventListener('mousemove', (event) => {
console.log('mousemove', event.pageX);
});
I want to catch a mouse event while I drag selected text.
An image where I show the problem:

you can use event drag:
document.addEventListener('drag', (event) => {
console.log('drag', event.pageX);
});
Text

Why is event.preventDefault() in dragstart interrupting furthur drag events from executing?

I am trying to drag over an image and in order to stop the browser's default image drag, I am using event.preventDefault(). But for some reason it is interrupting further events like dragenter, dragover, dragend etc from executing. Why is this and How can I stop browser's default function without interrupting normal drag events.
<img src="/img/image1" id="img1"/>
jQuery
var obj=$('#ironman');
obj.on('dragstart', function (e) {
//e.preventDefault();
console.log("dragstart");
});
obj.on('dragenter', function (e) {
console.log("dragenter");
});
obj.on('dragover', function () {
console.log("dragover");
});
obj.on('dragleave', function () {
console.log("dragleave");
});
obj.on('dragend', function () {
console.log("dragend");
});
JSfiddle

This is a tough one as you are stopping native drag chain event on the element. Not sure why you want to do this, but one way to implement the native dragging is to cancel it and deal with mouse events
var obj=$('#ironman');
obj.on('mousedown', function (e) {
console.log("mousedown");
// bind to the mousemove event
obj.on('mousemove', function (e) {
console.log("mousemove");
});
});
obj.on('mouseup', function (e) {
console.log("mouseup");
// unbind the mousemove event
obj.unbind('mousemove');
});
obj.on('dragstart', function (e) {
e.preventDefault(); // cancel the native drag event chain
console.log("dragstart");
});

off hover jquery using .on()

I know that the hover method in query allows you to specify what happens when a user hovers and what happens when a user un-hovers. However, I am using .on() to handle the hover event because the content is dynamically created. How can I return it to its original state when the user un-hovers. Here is my code, I have tried .off() but it has not given the results I'm looking for:
$('tr').on('hover', 'td', function(){
$(this).fadeTo(500, 1 )
})
Here's what I've tried:
$('tr').off('hover', 'td', function(){
$(this).fadeTo(500, .85 )
})
thanks.

If you want to use .on(), the events to handler are "mouseenter" and "mouseleave". You can do it with a single call:
$('tr').on({
mouseenter: function() {
$(this).fadeTo(500, 1); // or whatever
},
mouseleave: function() {
$(this).fadeTo(500, 0.85); // or whatever
}
}, 'td');
You can also do this with CSS, using the ":hover" pseudo-class. That'll work even in older versions of IE, to some extent. You can animate the changes too.

This is what you need
$('tr').on('mouseenter', 'td', function(){
$(this).fadeTo(500, 1 )
}).on('mouseleave', 'td', function(){
$(this).fadeTo(500, .85 )
})

You can do it in pure CSS but here you go:
$('tr').on('mouseenter mouseleave', 'td', function( e ){
$(this).fadeTo(500, e.type=="mouseenter" ? 1 : 0.85 );
});
Using hover:
$('tr td').hover(function( e ){
$(this).fadeTo(500, e.type=="mouseenter" ? 1 : 0.85 );
});
Tip:
.on('hover' will not bound direct references to the mouseenter mouseleave events separately like using the Method reference $(selector).hover(handlerIn, handlerOut), but just the hover event.
To resume:
$('tr').on('hover', 'td', function( e ){
// no separated "mouseenter" and no "mouseleave" e.type reference here :(
// just "hover" event
});
$('tr').on('mouseenter mouseleave', 'td', function( e ){
// e.type are defined :)
});
$('tr').on('mouseenter', 'td', function( e ){
// function only for 'mouseenter' event
}).on('mouseleave', 'td', function(){
// function only for 'mouseleave' event
});
$('tr td').hover(function( e ){
// e.type "mouseenter" and "mouseleave" are in event reference :)
});
// $("tr td").hover(handlerIn, handlerOut)
$('tr td').hover(function(){
// Method default // e.type reference == "mouseenter"
}, function(){
// Method default // e.type reference == "mouseleave"
});
Now it just depends if you need to delegate your events to elements using .on() (dynamically created elements) or is .hover() just suitable for your needs.
Regarding the .off() Method you can take a closer look at what it does: here
Basically if at some point you want to remove any further event delegation to an element than you use .off():
$('#selector').on('click', 'button', function(){
// Function callback:
alert('I will alert only once cause of off()');
$('#selector').off('click', 'button');
});

hover is not an event it is a shortcut for mouseenter and mouseleave event handlers
$('tr').on('mouseenter', 'td', function(){
$(this).fadeTo(500, 1 )
}).on('mouseleave', 'td', function(){
$(this).fadeTo(500, .85 )
})

$('.element').hover(
function () {
$(this).fadeTo(500, 1);
},
function () {
$(this).fadeTo(500, .85);
}
);

Categories

Resources