I have a droppable div that contains child elements that are not droppable.
For some reason, if you drop on the first child element, the drop event is not triggered, but it is on the second child element.
Here's a JSFiddle example: http://jsfiddle.net/bppn33q3/1/
Why is this? And how can I fix it?
EDIT: Wrong fiddle
It actually is working. Look at what happens when you remove margin-top: 50px.
.drag {
padding: 10px;
width: 25%;
background-color: aqua;
}
Updated Example
As you can see, the margin affects the placement calculations.
You could always play around with the tolerance option - (example).
$('.drop').droppable({
accept: '.drag',
tolerance: "pointer",
drop: function () {
alert('dropped');
}
});
Playing with your fiddle, it appears that the issue is the css.
Check out my new fiddle after I removed your margin:
http://jsfiddle.net/bppn33q3/2/
.drag {
padding: 10px;
width: 25%;
background-color: aqua;
}
Related
This probably cannot be done, but I have a fixed-position div on top of inline html in the page body. The inline html has clickable elements, and the fixed div has a hover event.
The fixed element is an empty div, so it is invisible.
Currently, the fixed element is blocking click events on the item under it.
Is it possible?
This solution is too complicated
https://stackoverflow.com/a/9616491/209942
Possible solution?
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Thx
The fixed element should not be prevent the clicks from the item under it unless you are stopping the event propagation.
See this fiddle: https://jsfiddle.net/pv0mygz5/
-- it demonstrates that without event.stopPropagation the event should be intercepted by the listener on the span element.
$('#click-me').on('click', function (e) {
console.log('click triggered');
});
$('.box').on('mouseover', function (e) {
//don't stop event from bubbling
console.log('hover triggered');
});
Could you also include a code snippet that demonstrates your problem?
although IE10 doesn't support it you can use
pointer-events: none;
http://jsfiddle.net/leaverou/XxkSC/light/
In this fiddle you can see a drop down being covered with other elements, the other elements has pointer-events: none so you can click on the arrow down button and the click actually goes to the select element itself.
BR,
Saar
You can also try using z-index. Depending on your layout it may not be a solution, but if your front div is invisible, then it shouldn't create unwanted effect. Like this for example:
document.querySelector('#under').addEventListener('click', function(e) {
e.target.style.color = "blue";
});
document.querySelector('#notunder').addEventListener('click', function(e) {
e.target.style.color = "blue";
});
#fix {
width: 60px;
height: 200px;
position: fixed;
z-index: -1;
top: 0px;
border: 1px solid black;
}
#under {
display: inline;
}
#fixnozindex {
width: 100px;
height: 200px;
position: fixed;
left: 75px;
top: 0px;
border: 1px solid black;
}
#notunder {
display: inline;
}
<div id="fix"></div>
<div id="under">Clickable</div>
<div id="fixnozindex"></div>
<div id="notunder">Not clickable</div>
Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.
you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});
Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle
I have been able to open a page and drag items onto the surface div tags onto the surface. I have also been able to move the items and resize them.
Now, I am trying to load the same objects onto the surface when the page loads and still have the capability to move them, resize or remove the cloned them
I was able to add the object to the page, however, when i move the objects they revert to the original position and i am unable to resize the cloned object.
Below is my code, can somebody please tell me where i may be going wrong with my implementation?
$(document).ready(function (event, ui) {
if ($('#rlvPdf_ctrl0_pnlPdfPage').length) {
var clonedObject = $("#textbox").clone();
clonedObject.addClass("dropped");
//$(function () {
//Make element draggable
clonedObject.draggable({ revert: false});
$("#rlvPdf_ctrl0_pnlPdfPage").droppable({
accept: 'textbox',
drop: function (event, ui) {
$(this).append($(ui.draggable).clone());
$("#rlvPdf_ctrl0_pnlPdfPage.clonedObject").addClass("dropped");
}
});
clonedObject.appendTo("#rlvPdf_ctrl0_pnlPdfPage");
}
HTML
<div id="toolbar" class="toolbar">
<div id="textbox" class="draggableItem">
<span class="draghandle">::</span>
<span class="draggableItemContentText">Text Box</span>
</div>
</div>
<div id="rlvPdf_ctrl0_pnlPdfPage" pageNum="1" >
CSS
.dropped
{
position: absolute !important;
display: inline-block;
margin: 0 auto;
background-color: wheat;
}
.draggableItem
{
position: relative;
height: 18px;
width: 150px;
z-index: 1000;
box-shadow: 0px 2px 2px black;
display: inline-block;
}
Hi I have a div with the following styling:
#lists li {
width: 580px;
background: #FFD586;
margin-bottom: 5px;
padding: 10px;
list-style: none;
line-height: normal;
text-align: left;
margin-left: 40px;
font-size: x-large;
overflow: scroll;
}
I want to make the div draggable, however the content within the div is being pulled in from my database, and I cannot seem to get the content to be draggable.
Any suggestions?
give that list element class name or use id and make it draggable, here the jquery code:
$( ".draggableclass").draggable(); //$( "#yourid").draggable();
$( ".droppableclass" ).droppable({ //same here
accept:".draggableclass",
drop: function( event, ui ) { //function that will activate after dropping
}
});
If you don't need droppable function, just use draggable and you'll be able to drag it anywhere.
Try Jquery, it's easy to use, see more here:
http://jqueryui.com/draggable/
Like this:
$(document).ready(function() {
$('#lists').draggable();
});
Or see this in action here: http://jsfiddle.net/9axcg/
I don't have much experience with jQuery.
I have 4 li elements and a draggable block. When I drag from green to blue, first I need my dragging block to stand behind blue and not go out from the borders of the container, meaning that my draggable element must be always snap into the container.
When my draggable element stand behind blue, the background color must be changed from brown to red.
Can anybody help me? Because I don't really know how to do this. All what I have at this moment is: JSFiddle
HTML
<div id="container" class="ui-widget-header">
<div id="draggable" class="ui-widget-content"></div>
<ul id="menu">
<li id="menuElement1"></li>
<li id="menuElement2"></li>
<li id="menuElement3"></li>
<li id="menuElement4"></li>
</ul>
</div>
CSS
body {
background-color: brown;
}
#container {
position: relative;
}
#menu,
#draggable {
position: absolute;
top: 0;
left: 0;
}
#draggable {
width: 100px;
height: 150px;
}
#menu {
margin-left: -40px;
}
ul li {
display: block;
float: left;
padding: 50px;
}
#menuElement1 {
background-color: green;
}
#menuElement2 {
background-color: blue;
}
#menuElement3 {
background-color: black;
}
#menuElement4 {
background-color: red;
}
#container {
height: 150px;
width: 100%;
background-color: gray;
JQuery
$(function() {
$( "#draggable" ).draggable({ snap: ".ui-widget-header" });
});
Here's an updated fiddle
You'd do well to read this article on Droppable from the jQuery docs. Basically you were half way there, you need to make an element (the blue box, with id #menuElement2) droppable to provide a target for a draggable element
$('#menuElement2').droppable({
drop: function( event, ui ) {
//Do something here...
}
});
Within the drop function (this fired when the block is dropped on the target) you need to perform your action.
$('body').css({'background-color': 'red'});
This adds a custom css rule to the body that changes the colour, again check out the jQuery docs - search for 'jQuery css'.
Hope this helps :)
Update: I just updated the fiddle again to make it revert back to brown when you change selection - not sure if you wanted this but it can be easily removed by commenting out the css change within the drag function.