JQuery droppable out event is not fired sometimes draggable with cursorAt - javascript

Sometimes JQuery droppable out event not fired when draggable has param cursorAd (before start dragging draggable moves out of droppable to set cursor position like in cursorAd).
For example (try to drag it by right bottom corner):
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery.min-1.5.0.js"></script>
<script type="text/javascript" src="jquery-ui.min-1.8.9.js"></script>
</head>
<body>
<div id="dg1" style="z-index:1;border:1px solid red;width:100px;height:50px;position:absolute;">draggable</div>
<div id="dp1" style="border:1px solid green;width:100px;height:50px;position:absolute; top:100px;left:100px;">droppable</div>
<script>
$(document).ready(function(){
$('#dg1').draggable({
cursorAt:{
left:20,
top:20
}
});
$('#dp1').droppable({
drop:function(){
console.log('drop event');
},
out:function(){
console.log('out event');
}
});
});
</script>
</body>
</html>
Please help me to resolve this problem

Just add tolerance touch to droppable
tolerance:"touch"
Working Demo
By default tolerance is set to intersect
"intersect": Draggable overlaps the droppable at least 50% in both
directions.
We need to make it touch as per you requirement.
"touch": Draggable overlaps the droppable any amount.

Related

Using a variable to trigger a colour change using jQuery color.js

I would like to change the colour of an element (in this example a 100px x 100px square called "block" from transparent to black when the variable trigger= 1. The code listed below works with a button. I have other javascript (that this code will be incorporated into that does work with trigger.
Any help would be appreciated.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/colourswap.css">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="_js/jquery.color.js"></script>
</head>
<body>
<div id="block">Hello!</div>
<!--button id="go">Simple</button-->
<script>
var trigger = 1;
(function(){
if (trigger == 1) {
jQuery("#block").animate({
backgroundColor: "#000"
}, 1500 );
};
});
</script>
</body>
</html>
You can actually just use .show() or .toggle() if the block is transparent otherwise, e.g.
//say if you wanted the block to show when button is clicked
$("#go").click(function(){
$("#block").toggle();
});
And then set the block's colour to black by default.

jQuery resizable issue if applied to child element of a resizable

Here is my complete code, which is derived from jQuery Resizable Example -
In my example I have two div elements, with id parent and child, where child element is inside parent element. My Problem is I am not able to resize parent element, even I have made it resizable. Has anyone faced the similar issue?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#parent {
padding: 40px;
width:400px;
height:400px;
}
#child {
width: 150px;
height: 150px;
}
</style>
<script>
$(function() {
$( "#child" ).resizable();
$( "#parent" ).resizable();
});
</script>
</head>
<body>
<div id="parent" class="ui-widget-content">
<h3>Parent</h3>
<div id="child" class="ui-widget-content">
<h3>Child</h3>
</div>
</div>
</body>
</html>
NOTE
Playing with the code, I just found out, this problem only occur is I make child element reseizable before parent element. As in code -
$(function() {
$( "#child" ).resizable();
$( "#parent" ).resizable();
});
If I change the order to -
$(function() {
$( "#parent" ).resizable();
$( "#child" ).resizable();
});
it will work smoothly. I am not sure why it is happening.
I will try looking into jQuery resizable code but if someone already have faced and solve this issue it will be very helpful.
-Thanks
A ticket has been opened about this on jQuery bugtracker (ticket #7711), but as you can see, it was considered has "not a bug", specifying the work-around you found by yourself as a solution:
As a work-around, initialize the outer/parent resizable first and both are resizable

Detect mouse speed using jQuery

I want to detect mouse speed, for example the event will be fired only if the detected number is greater than 5
I found one example which I think is something similar: http://www.loganfranken.com/blog/49/capturing-cursor-speed/
but i am not able to make it see the number which is inside div and fire the event based on the resulting number, this is my attempt:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.cursometer.1.0.0.min.js"></script>
<script>
$(function() {
var $speedometer = $('#speedometer');
$('#test-area').cursometer({
onUpdateSpeed: function(speed) {
$speedometer.text(speed);
},
updateSpeedRate: 20
});
$("#test-area").mouseover(function(){
if(this.value > 5) {
console.log("asdasd");
}
else {
console.log("bbb");
}
})
});
</script>
<style>
#test-area
{
background-color: #CCC;
height: 300px;
}
</style>
</head>
<body>
<div id="test-area"></div>
<div id="speedometer"></div>
</body>
</html>
(I'm the author of the plug-in that's causing the trouble here)
The example isn't working because this.value isn't referring to the speed (it's undefined). Here's an updated version of your example:
http://jsfiddle.net/eY6Z9/
It would probably be more efficient to store the speed value in a variable rather than within the text value of an HTML element. Here’s an updated version with that enhancement:
http://jsfiddle.net/eY6Z9/2/
Hope that helps!

Show X and Y coordinates?

I am not really sure of how to start this one off.
Either way, I want to show x and y coordinates on a webpage when the mouse moves on the page. It also has to work with any browser.
Heres the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Coordinates</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="center">
<h1>Mouse Coordinates</h1>
<p>x-coordinate: </p><p id="xcord">0</p>
<p>y-coordiante: </p><p id="ycord">0</p>
</div>
</body>
</html>
CSS File:
#center{
margin: 0 auto;
width: 500px;
}
JavaScript File:
Not much, not sure where to start off...
window.onload = init;
function init(e) {
}
basically you need to document.addEventListener('mousemove', mousemover, false); that references a function - mouseover() - that will get your clientX and clientY. From there you need to set innerHTML of your two p elements to those values.
You can use pageX and pageY something like this:
$(document).ready(function(){
$('body').on('mousemove', function init(e) {
$('#xcord').text(e.pageX);
$('#ycord').text(e.pageY);
});
});
demo
I guess this is what you are looking for assuming you are using JQuery.
$(function(){
$(document).on('mousemove', function(e){
$("#xcord").html(e.pageX);
$("#ycord").html(e.pageY);
});
});
http://jsfiddle.net/Zvm7s/2/
Hope it helps

jquery start dragging object when clicked on the other

here's the deal:
I'm trying to make a colorpicker act much like in Photoshop, so I have a background image of a color picker (rainbow-like image 200x200 px) and a circle trigger inside of it.
So, if i attach a draggable UI to a circle:
$('#rainbow-color-picker .circle').draggable({containment: 'parent'});
Works great. But here's another issue.. I want the drag to start when I click the parent block of the circle (i.e. the color picker image).
Here's the HTML markup:
<div class='rainbow-color-picker' id='rainbow-color-picker'><div class='inner1'><div class='inner2'>
<div class='circle'><div class='circle-inner'></div></div>
</div></div></div>
So when I click on .inner2, I want .circle to start dragging.
I've tried
$("#rainbow-color-picker .inner2").bind( "mousedown", function(event) {
$("#rainbow-color-picker .circle").trigger('dragstart');
});
But that doesn't work :( did anyone happen to meet this problem?
Thanks
Here it is, just figured it out.
$("#rainbow-color-picker .circle").trigger( event );
Here was my ticket:
Can click on jquery draggable parent start drag?
This is just a draft, feel free to try it out. Included google jQuery and UI for quick draft. Btw, getting the positions from the events should be enough for converting it into colors.
Happy coding :)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function() {
var pos = $('#color-pos');
$('#color-field-circle').draggable({
containment: 'parent',
start: function(e) {
pos.html("start: "+e.pageX+" "+e.pageY);
},
drag: function(e) {
pos.html("drag: "+e.pageX+" "+e.pageY);
},
stop: function(e) {
pos.html("stop: "+e.pageX+" "+e.pageY);
}
});
});
</script>
<style type="text/css" media="screen">
#color-picker{width:200px;height:250px;background:#ddd;padding:10px;}
#color-field{width:180px;height:230px;background:#ccc;}
#color-field-circle{cursor:pointer;width:16px;height:16px;background:#f30;}
</style>
</head>
<body>
<div id="color-picker">
<div id="color-field">
<div id="color-field-circle"></div>
</div>
<div id="color-pos"></div>
</div>
</body>
</html>

Categories