I'm trying to make a draggable div. I wrote some code to intercept the events with this html:
<div class="draggable">
<iframe id="frame" src="http://www.wikipedia.org"></iframe>
</div>
Here's the js:
$(".draggable").bind("mousedown", function(e){
e.preventDefault();
console.log(e);
$(".draggable").bind("mousemove",function(e){
var x = e.pageX;
var y = e.pageY;
$("#draggable").css({top: y, left: x});
});
});
$(".draggable").bind("mouseup", function(e){
e.preventDefault();
$(".draggable").unbind("mousemove");
});
$(".draggable").bind("touchstart touchmove", function(e) {
e.preventDefault();
var orig = e.originalEvent;
var x = orig.changedTouches[0].pageX;
var y = orig.changedTouches[0].pageY;
// Move a div with id "rect"
$(".draggable").css({top: y, left: x});
});
Here's a jsfiddle: http://jsfiddle.net/xbv3opd7/34/
The issue is that the element does not seem to intercept the events. The code works if I bind the event to the document: http://jsfiddle.net/xbv3opd7/35/
Where am I wrong?
Yea, because you'll first need to add jQuery-UI to your page.
You can download it here: http://jqueryui.com/download/
Then you need to make it .draggable(), by doing this:
$(".draggable").draggable();
Let me know how that works for you.
Related
Mouse function cannot be support
$("div.container1:has('#image')").hover(function() {
console.log("Success hover");
});
and this is my div class
<div class="container1">
<img src="img/1920/blue.jpg" id="imageId"/>
</div>
functionality in div class for click action
$(document).ready(function() {
$(".container1").click(function(e) {
e.preventDefault();
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var img = $('<button>');
img.css('top', y);
img.css('left', x);
img.css('position', 'absolute');
img.attr('type', 'button');
img.attr('id', 'image');
img.css('z-index', 1);
img.attr('class', 'btn btn-info btn-lg');
$(this).attr('data-toggle','modal');
$(this).attr('data-target','#myModal');
img.attr('data-toggle','modal');
img.attr('data-target','#myModal');
console.log("Mouse action Start");
img.appendTo('.container1');
/*$(this).removeClass('.container1');*/
console.log("Mouse action End");
$(this).removeClass('<button>');
});
});
Another way of selecting works , jsbin
$("div.container1 #imageId").hover(function() {
console.log("Success hover");
});
It is because .hover takes two parameters. A callback for when the mouseenters, and a callback for when it leaves.
Also, are you adding the DOM element and THEN adding the click handler? If so, you definitely need to use .on().
.on() is used for elements that are added dynamically to the DOM.
you probably need to do .on('mouseenter', [callback]) AND .on('mouseleave', [callback]) rather than .hover(). just fyi.
I have a map with some pinpoints that, if you click on them show some information. The plan was, that I can click a Icon and it shows a div, if I now click the same icon the div will disapear.
As long as i got show() it works but if I put in fadeIn() it reapears on the second click.
Here my script so far
<script type="text/javascript">
jQuery(document).ready(function() {
$(".icon-location").on('click', function(event){
$('[id^="ort-box-"]').fadeOut('slow');
});
var mouseX;
var mouseY;
$(document).ready(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(".icon-location").on('click', function(event){
var currentId = $(this).attr('id');
$("#ort-box-"+currentId).show().css({position:"absolute", top:event.pageY, left: event.pageX, "z-index":"998"});
});
});
</script>
EDIT:
Thanks to Max I got something startet but there is some logic mistake I must have made.
$(".icon-location").on('click', function(event){
$('[id^="ort-box-"]').fadeOut('slow');
if(!$(this).hasClass('ortActive')){
var currentId = $(this).attr('id');
$("#ort-box-"+currentId).fadeIn('slow').css({position:"absolute", top:event.pageY, left: event.pageX, "z-index":"998"});
$(this).addClass('ortActive');
}else {
$(this).removeClass('ortActive');
}
});
You're attaching 2 eventhandlers on the same DOM element.
So if you click on it, both handlers will fire the event and both functions will be called.
Maybe use something like
$(this).addClass('active');
if you trigger the event for the first time, check when you press again with
if($(this).hasClass('active')){ ...
$(this).removeClass('active');
}
This way you can be sure, that you can trigger only the wanted parts of the event handlers.
I have some line of codes which will move an element to mouse position after it is mousedown-ed.
I want to remove the event attached to it, so it won't following the mouse position anymore after it is mouseup-ed!
The Problem
The element still follows the mouse after mouseup!
I want it to follow the mouse on mousedown and stop following the mouse after mouseup! How do I remove the mousemove listener from the element?
Here is the JS
jQuery(document).ready(function ($) {
$(".crossY").on("mousedown", function (e) {
var j = $(this);
$(document).on("mousemove", function (e) {
j.css({
"top": e.pageY,
"left": e.pageX
});
});
})
$(".crossY").on("mouseup", function (e) {
var j = $(this);
$(document).on("mousemove", function (e) {
j.css({
"top": j.css("top"),
"left": j.css("left")
});
});
});
});
and the FIDDLE DEMO
In order to remove a mouse listener, you need to use the jQuery .off method. In order to get this to work easily, you should namespace the mousemove event. This will allow you to easily detach the necessary mousemove listener.
Inside the mousedown we want to attach the listener
$(document).on('mousemove.following', function (e) { /* my event handler */ })
Inside the mouseup we want to detach the listener
$(document).off('mousemove.following')
The following namespace makes sure that no other event listeners are detached.
Here is an example of this working (your jsfiddle except updated).
Another thing you might want to do is make the moving part centered underneath the mouse.
$(".crossY").on("mousedown", function (e) {
var j = $(this);
var height = j.height(), width = j.width();
$(document).on("mousemove", function (e) {
j.css({
"top": e.pageY - height/2,
"left": e.pageX - width/2,
});
});
})
Subtracting half of the element height and width keeps the element centered underneath the mouse, which will also ensure that the mouseup even is fired.
try using bind() and unbind() like this: DEMO
jQuery(document).ready(function ($) {
$(".crossY").on("mousedown", function (e) {
var j = $(this);
$(document).bind("mousemove", function (e) {
j.css({
"top": e.pageY-10,
"left": e.pageX-10
});
});
})
$(".crossY").on("mouseup", function (e) {
var j = $(this);
$(document).unbind("mousemove");
});
});
Try
jQuery(document).ready(function ($) {
$(".crossY").on("mousedown", function (e) {
var j = $(this);
$(document).on("mousemove", function (e) {
j.css({
"top": e.pageY,
"left": e.pageX
});
});
})
$(".crossY").on("mouseup", function (e) {
var j = $(this);
$(document).off("mousemove");
});
});
I am working with jquery events and I am adding a new element at the time of mousedown at the position of the mouse pointer and after adding the element the binded click event is not triggered.
Any suggestion is appreciable.
Thanks in advance.
Madhu
Code:
<div style="border:1px solid">Click</div>
<span></span>
<div class="vis" style="display:none">Hello</div>
<script>
var visualEle = $('div.vis');
visualEle.css({border:"1px solid"});
$('a').on("click", function (e) { e.preventDefault();});
$('div').on("mousedown", mDown);
$('div').on("mouseup",mUp);
function mDown(e) {
e.preventDefault();
visualEle.css({ left: 100, top: 0, display: "block" });
}
function mUp(e) {
e.preventDefault();
$('span').append('mouse up triggerd<br/>');
return false;
}
$('p').on("click",dClick);
function dClick(e) {
$('span').append('double click triggerd<br/>');
}
</script>
In the above code the click event is not triggered after the mousedown is completed.
according to this document
The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released
in your case mouse point is over when mousedown happen but after that visualDiv moves under and mouse is released on this element.
possible solution I can think of thanks to #ArunPJohny is use $(this).trigger("click");
$('p').on("mousedown", function (e) {
_x = e.pageX;
_y = e.pageY;
visualDiv.css({
left: _x,
top: _y
});
$(this).trigger("click");
});
$('p').on("click", function (e) {
console.log(e.target)
});
Demo: http://jsfiddle.net/c5CRd/
How do I attach html-element to mouse cursor using jQuery. This should be something like 'draggable', but I want that element clung to the cursor after mouse double-click and to follow the cursor until the left mouse button is pressed.
You'll want to use .mousemove() and .offset().
$("#clickedElement").dblclick(function () {
var $someElement = $("#elementToCling");
$(document).mousemove(function (e) {
$someElement.offset({ top: e.pageY, left: e.pageX });
}).click(function () {
$(this).unbind("mousemove");
});
});
Working demo: http://jsfiddle.net/EbbxA/