I'm trying to have a draggable div which can also be dragged from a textarea within it.
html:
<div id="divContainer">
<textarea id="text"></textarea>
</div>
css:
#divContainer {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 100px;
background-color: blue;
}
#text {
position: absolute;
left: 5px;
top: 5px;
width: 50px;
height: 50px;
background-color: green;
}
jquery:
$("#divContainer").draggable();
I can drag the div if I drag by clicking in the div area, but not if I click into the textarea area.
Is there a way to solve this ?
Here is the jsFiddle
Check Out this fiddle perfect for you
FIDDLE
Code:
HTML:
<div>
<textarea name="ta" id="ta" cols="30" rows="10"></textarea>
</div>
CSS:
div {
background-color:#aaa;
padding: 4px;
text-align: center;
position:relative;
}
JS:
$('div').draggable({
cancel: "ta",
start: function (){
$('#ta').focus();
} ,
stop: function (){
$('#ta').focus();
}
});
You can use the cancel option, setting it to '', similar to this:
$("#divContainer").draggable({ cancel: '' });
DEMO - Using the cancel option
Though this works for dragging, it causes other issues.
You are now unable to click into the textarea itself as draggable takes over the event.
You would have to write some custom code now to work around this.
Using an overlay is also a problem to implement as you now have to deal with when to place it over the div and when not.
I would recommend to leave the default functionality of any elements inside the draggable div as is instead of "hacking" around them.
Possible Alternative
A more user-friendly approach might be to add a frame-like border to the div or a header-like border at the top to enable to user to drag the div.
Using HTML similar to this:
<div id="divContainer">
<div class="dragger"></div>
<textarea id="text"></textarea>
</div>
Giving the dragger the following css:
.dragger {
border: none;
background-color: gray;
height: 15px;
width: 100%;
display: block;
}
and updating your textarea css to not use absolute positioning but instead use margins to specify the 5px on the left and top.
#text {
width: 50px;
height: 50px;
background-color: green;
margin-top: 5px;
margin-left: 5px;
}
You then can implement the handle option similar to this:
$("#divContainer").draggable({
handle: '.dragger'
});
DEMO - Using a header to drag
I'm not sure if this is a solution you can use or not but it would be one option.
Hope this help:
Demo
JQuery:
$(document).ready(function(){
$('#move').css('top',$("#text").css('top'));
$('#move').css('left', $("#text").css('left'));
$("#divContainer").draggable();
$("#move").draggable({drag:function(event,ui){
$('#text').css('top',$("#move").css('top'));
$('#text').css('left', $("#move").css('left'));
},grid:[1,1],stop:function(){
$('#move').css('top',$("#text").css('top'));
$('#move').css('left', $("#text").css('left'));
}});
});
Related
I'm working on an interface where users can drop "widgets" on "droppable zones" in the page.
The widgets are stored in a div absolutely positionned in the page (on the left, with z-index:1)
The droppables zones are in another div in the page.
The problem is :
When i drag a widget from the left column to a droppable zone in the page, the droppable event is catch even through the left column div. I want to stop the droppable event when the user drags over the left colum, but keep the event when the user is out of the left column.
HTML
<div id="left">
<div class="dragMe">Drop me on Yellow</div>
<div class="dragMe">Drop me on Yellow</div>
<div class="dragMe">Drop me on Yellow</div>
<div class="dragMe">Drop me on Yellow</div>
</div>
<div id="right">
<div class="dropOnMe"></div>
<div class="dropOnMe"></div>
<div class="dropOnMe"></div>
<div class="dropOnMe"></div>
<div class="dropOnMe"></div>
<div class="dropOnMe"></div>
</div>
CSS
#left {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 220px;
z-index: 1;
background-color: gray;
padding: 10px;
}
.dropOnMe {
width: 500px;
height: 200px;
display: inline-block;
background-color: yellow;
}
.dragMe {
height: 20px;
width: 200px;
margin-bottom: 5px;
border: 1px solid red;
font-size: 13px;
background-color: white;
text-align: center;
cursor: move;
font-family: tahoma;
}
.ui-droppable-hover {
outline: 3px solid red;
}
JS
$(function() {
$('#left .dragMe').draggable(
{
helper: 'clone',
opacity: 0.5,
appendTo: 'body',
zIndex: 11
}
);
$('#right .dropOnMe').droppable(
{
drop: function( event, ui ) {
console.log(event);
}
}
);
});
Check example : http://jsbin.com/judajucuxu/1/edit?html,output
Any idea ?
Thanks.
The problem is not in JavaScript code. The problem is in your CSS.
Your left side is always a part of droppable area, because positioned absolutely.
It woks if you fix it in this example.
#left {
position: relative;
}
Besides, I wouldn't recommend using jQuery UI library for that, because all contemporary browsers has HTML Drag and Drop API.
EDIT 1:
You could also move the right on the width of the left container, to prevent interaction:
#right{
margin-left: 230px;
}
EDIT 2:
You could also do fancy stuff, once you say you can't change HTML.
Try to detect the cursor offset and decided if you ready to drop your element:
drop: function( event, ui ) {
if (event.pageX > $('#left').width() + 100) {
console.log(event);
}
}
Example
Try this code..
$('#left .dragMe').draggable({
refreshPositions: true
});
Please check the example
Example 1(a) , Fixed button
Example 1(b) , After Click form
I have created the fixed button but I’m not able to open the form on click. It will be very helpful if you can provide me with any resource or reference where I can learn how to make this.
Thanks in Advance.
This is pretty simple slideToggle function which show/hide element.
$(function() {
$('.sp').click(function() {
$('.form-wrapper').slideToggle("slow");
});
});
.sp{
position: absolute;
bottom: 0px; right: 0px;
cursor: pointer;
width: 120px;
background-color: gray;
}
.form-wrapper{
display:none;
height: 50px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sp">Slide Me Up
<div class="form-wrapper">form goes here</div>
</div>
I have two "DIV"s, one on the left and one on the right. The right one has draggable elements and the left one has a droppable container. Both DIV's have the CSS attribute overflow: auto, which is essential in my implementation because I need a scroll to appear in each div when either DIV overflows.
The issue is, when I drag the element in the right DIV, and move it to the left, it disappears after the edge of the DIV.
This is a sample of what I'm trying to do.
<!DOCTYPE html>
<html>
<head>
<title>Practice</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
for (var i = 1; i <= 20; i++) {
$('#right').append($('<div></div>')
.addClass('item')
.html(i));
}
$(".item").draggable({
cursor: "move",
revert: "invalid"
});
$("#bin").droppable({
drop: function(event, ui) {
var mydiv = $(ui.draggable);
$("#bin").html("Dropped");
}
});
});
</script>
<style>
#left {
border: 2px solid black;
position: fixed;
width: 49%;
height: 98%;
overflow: auto;
}
#right {
border: 2px solid black;
position: fixed;
left: 52%;
top: 2%;
width: 46%;
height: 98%;
overflow: auto;
}
#bin {
border: 2px solid black;
position: relative;
left: 12%;
top: 5%;
width: 75%;
height: 75%;
}
.item {
border: 2px solid black;
left: 12%;
top: 5%;
width: 15%;
height: 5%;
}
</style>
</head>
<body>
<div id="left">
<div id="bin">
</div>
</div>
<div id="right">
</div>
</body>
</html>
You need to remove the overflow:auto in your CSS. You will then see the item will be visible when dragging between the divs then.
In order to accomplish the functionality you'd like, you need an outer div wrapping the two container boxes. You'd set an fixed height on the outer div, then use overflow-y:scroll to get your functionality.
You can do as others have suggested, but I've always found the best way to accomplish this is to set the draggable item to position:fixed
see for example:
https://jsfiddle.net/gregborbonus/tzz0927p/1/
For me personally, this allowed a lot more flexibility, but I also did a lot of work with responsive designs and such to make it work right.
I've edited to include overlapping div's. Added a few functions to make it more visible, like random Color, and an on hover and hover out event to make it possible to see and click each box.
https://jsfiddle.net/gregborbonus/tzz0927p/3/
With 100 and added a scroll function to make the scroll smooth. Also added a quick snippet so that the elements would only appear within the containing box.
This is different from your code, it uses 2 containers, rightc for the main container(the one that scrolls) and right for the container of all the elements. The rest is commented in the code.
https://jsfiddle.net/gregborbonus/tzz0927p/13/
so, something I realized was that the elements would still overlap the page on page load.
So, to show this working with an even shorter div and changed to compensate for onload:
https://jsfiddle.net/gregborbonus/tzz0927p/15/
everyone. I'm working on a project that has a list of images. The user can scroll over the images and then press "enter" to bring up tooltip that tells them more about their selection.
I've been looking into tooltips, but they seem to be more geared towards using a mouse and I cannot get modified CSS tooltip code to place the information over the image when selected.
So, what I'm hoping is that someone can direct me to a method that can work with popping up a bubble of information using keystrokes.
function loatTooltip()
{
$('.tooltip').remove();
var name=contentName[navPosition][position.x];
if(position.y>0)
name=contentName[navPosition][position.x+4];
contentList[position.y][position.x].after('<div title="'+name+'" class="tooltip"></div>');
}
.tooltip {
display:block;
position: absolute;
width: 250px;
height: 120px;
background: #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
left:5%;
}
.tooltip:after {
display:block;
content: attr(title);
position: absolute;
display: block;
width: 95%;
z-index: 99;
color:white;
}
content: attr(title);
Thanks!
Consider this a "first draft" - FIDDLE.
Image in a div, hover and an absolutely positioned div pops up with the text inside it.
I've done "hover" and not "active" (selected) because of ease. But you can probably take the concept and move it to an "active" div or put a border around it, and "if border" change the CSS.
JS
$('.holder').hover(
function(){
$(this).children('div').css({ 'display': 'block',
'background-color': 'red'});
},
function(){
$(this).children('div').css('display', 'none');
}
);
I am simulating a pop up window that fades the background out. I do this by simply toggling a div that fills the whole screen. I would like to be able to close the pop up by clicking the outside background, but not when you click on the new content area, which is what is currently happening. My code:
JS:
function popbox() {
$('#overbox').toggle();
}
HTML:
<div class="popbox" onclick="popbox()"> Click Here </div>
<div id="overbox" onclick="popbox()">
<div id="infobox1">
<p>This is a new box</p>
<br />
<p>hello </p>
<br/><br/>
<p style="color:blue;text-align:center;cursor:pointer;" onclick="popbox()">close</p>
</div><!-- end infobox1 -->
</div> <!-- end overbox -->
CSS:
#overbox {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(64, 64, 64, 0.5);
z-index: 999999;
display: none;
}
#infobox1 {
margin: auto;
position: absolute;
left: 35%;
top: 20%;
height: 300px;
width: 400px;
background-color: white;
border: 1px solid red;
}
.popbox {
cursor: pointer;
color: black;
border: 1px solid gray;
padding: 5px; 10px;
background: ghostwhite;
display: inline-block;
}
JSFiddle link: http://jsfiddle.net/RrJsC/
Again, I want it to toggle only when you click the faded background or "close" (which isnt working in the jsfiddle but is on my site), but not when you click inside the white box that it contains.
After some research it seems like I might be looking for .stopPropagation(), but I haven't been able to get it to work at all.
I got it to work using jQuery's event handlers:
$('#container').on('click', '.popbox, #overbox', function(e){
$('#overbox').toggle();
});
$('#container').on('click', '#infobox1', function(e){
e.stopPropagation();
});
I replaced document with '#container' for better performance. You should wrap all your divs in <div id="container">...</div> so the the callback doesn't fire on the dom every time there is a click (even thought that callback is only called when the selector matches).
You'll also need to get rid of your onclick html attributes, because they will throw an error if that function is not defined.
I hope I understand well your problem.
If it is the case, you should have this:
<div id="overbox">
instead of this:
<div id="overbox" onclick="popbox()">
here is the updated jsfiddle