How do I define the containment area for a draggable to have it draggable outside of its parent element? I have two droppable containers that have draggable divs in them. I want to drag the contained divs between the containers. But the divs drop under the border of the parent container instead of going across. I can only get the divs to go from one container to another if I set a very high z index, which causes the divs to not really be place in the container. This messes up the page display.
Here is the jsfiddle for this http://jsfiddle.net/gkvgn/8/. The relevant code in that jsfiddle is that function where the container divs are made draggable and droppable and where the contained div elements are made draggable with containment of 'document'.
$(function() {
$( "#editdiv" ).resizable();
$( "#editdiv" ).draggable();
$( "#editdiv" ).draggable("option", "handle", '#heading');
$( "#editdiv2" ).resizable();
$( "#editdiv2" ).draggable();
$( "#editdiv2" ).draggable("option", "handle", '#heading');
$( ".comurl" ).draggable();
$( ".comurl" ).draggable("option", "handle", '#dhandle');
$( "div.droppable" ).droppable({
drop: function( event, ui ) {
var $item = ui.draggable;
$item.fadeOut(function() {
$item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
});
$item.appendTo( this );
}
});
$( ".comurl" ).draggable({ containment: 'document' });
});
If I change the containment to 'parent' or 'window' the draggable divs in the container seem to be more constrained than if I select 'document'.
Since I thought that z-index was an issue, I set the z-index for the ui-draggable-dragging class in the css.
.ui-draggable-dragging {
z-index: 999999;
background-color: red;
}
What must I fix to be able to drag an element div, e.g. Facebook.com from the first container to the second? Thanks.
Had to remove overflow: hidden;
.link_drop_box{
height:80%;
/* overflow:hidden; */
}
.comdiv {
position:absolute;
padding: 0;
border: 1px solid DarkKhaki;
border-radius: 3px 3px 0px 0px;
box-shadow: inset 0px 0px 10px DarkKhaki;
/* overflow-y: hidden;
overflow-x: hidden; */
}
http://jsfiddle.net/gkvgn/10/ .
Related
Im using jqueryUI for creating quiz type questions.
When I drag and drop correct answer(first one) to droppable area, it should turn green.
Rest of options, it should turn red.
Now it is not turning our properly.. can anyone pls help me on this.?
My work:
https://codepen.io/vimalraj86/pen/poJyOQr
This is the code snippet i have used.
$( function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
}
});
} );
$( function() {
$( "#draggable1" ).draggable();
$( "#draggable2" ).draggable();
$( "#draggable3" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-red" )
}
});
} );
You need a condition to help decide. You can use an if statement or some other way to determine which class should be added.
$(function() {
$("div[id^='draggable']").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
if (ui.draggable.text().trim() == "C") {
$(this).addClass("ui-state-green");
} else {
$(this).addClass("ui-state-red")
}
}
});
});
#draggable,
#draggable1,
#draggable2,
#draggable3 {
width: 100px;
height: 100px;
padding: 0.5em;
margin: 10px 10px 10px 0;
border: 1px solid #ccc;
background: #fff;
float: left;
}
hr {
float: left;
width: 100%;
background: #ccc;
}
#droppable {
width: 400px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
border: 1px solid #ccc;
background: #fff;
}
#droppable.ui-state-green {
background: green;
}
#droppable.ui-state-red {
background: #ff0000;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="droppable" class="ui-widget-header"></div>
<hr/>
<div id="draggable" class="ui-widget-content">
<p>A</p>
</div>
<div id="draggable1" class="ui-widget-content">
<p>B</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>C</p>
</div>
<div id="draggable3" class="ui-widget-content">
<p>D</p>
</div>
<button id="reset">reset</button>
I want to make children sortable inside parent on x-axis. It works but during moving an element rest of them changes their paddings or margins, i.e. they go bellow the active element.
<div id='parent'>
<div class='tagup'>EARTH</div>
<div class='tagup'>SUN</div>
<div class='tagup'>MOON</div>
<div class='tagup'>VENUS</div>
</div>
CSS
#parent{
padding:5px 10px;
background:lightgreen;
}
.tagup{
display:inline-block;
background:darkblue;
color:white;
text-align:center;
border-radius:5px;
cursor:pointer;
padding:1px 5px;
margin:3px;
}
JS
$('#parent').sortable({
axis: "x",
containment: 'parent',
tolerance: "pointer",
});
Here is an EXAMPLE
How to keep them in one line during dragging?
g
Sortable sets contaner's height. Let's set height auto of tagup.
.tagup{
display:inline-block;
height:auto !important; //Add this line
background:darkblue;
color:white;
text-align:center;
border-radius:5px;
cursor:pointer;
padding:1px 5px;
margin:3px;
}
Here's what I'm doing:
1) Add a "hide" CSS class:
.hide {
visibility: hidden;
display: none;
}
2) Add some HTML to where the Dialog should display, hiding it by default, such as:
<div class="hide" id="postTSec4" name="postTSec4">
<h2>Post-Travel Bottom</h2>
<img id="imgPostTravelBottom" name="imgPostTravelBottom" src="images/4_PTE_Bottom_Jig.png" alt="post Travel image" height="275" width="350">
</div>
<div class="hide" id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
3) In response to some event, unhide the div and call dialog() on it, such as:
$( "#dialog" ).removeClass('hide');
$( "#dialog" ).dialog();
The problem is that this causes the dialog to display in the middle of the page; I want the dialog to display with its NW corner at the tip of the cursor/pointer/finger.
So how can I control where the dialog appears?
UPDATE
I used the linked-to, supposedly-the-answer code as a basis, but no, it doesn't quite work in my situation.
UPDATE 2
With this code (adapted from meteorBuzz's answer):
CSS
.outer {
width: 100%;
height: 700px;
border: 2px green solid;
padding: 10px;
}
#dialog {
height: 100px;
max-width: 100px;
border: 3px black solid;
padding: 5px;
z-index: 100;
}
HTML:
<template name="postTravelSection5">
<div class="outer hide" id="postTSec5" name="postTSec5">
<div id="dialog" name="dialog" title="Basic dialog">
<p>This is dialog content area...</p>
</div>
</div>
</template>
JavaScript:
Template.postTravelSection5.events({
'click #postTSec5': function(event) {
var x = event.pageX;
var y = event.pageY;
$("#dialog")
.offset({
'left': x,
'top': y
});
}
});
Template.postTravel.events({
'click #imgPostTravel': function() {
. . .
$('#postTSec5').removeClass('hide');
}
});
("outer" and "dialog" are seen after "imgPostTravel" is clicked).
...it does not work; I see the two divs (the outer one with the green border, and the div dialog within it), but clicking does nothing.
You can have full control of the div behaviour by simply creating your own behaviour model instead of using jquery-ui for this particular matter.
Also, you can make the dialog look unique instead of having to over-ride jquery-ui default styling and positioning.
You may move the div to where the click event took place in two steps:
Capture x/y coordinates of the click event
Set these values to the styling of the div using javascript.
Notice, I've created an #outer div that spans most of the web page to allow the #dialog div to move within such a space.
HTML
<template name="postTravelSection4">
<div class="outer">
<div id="dialog" title="Basic dialog">
<p>This is dialog content area...</p>
</div>
</div>
</template>
JS
Template.postTravelSection4.events({
'click': function(event) { // you may add which element fires this function when you click it.
var x = event.pageX; // x coordinates
var y = event.pageY; // y coordinates
$( "#dialog" )
.offset({
'left': x,
'top': y
});
}
});
}
CSS
.outer {
width: 100%;
height: 700px;
border: 2px green solid;
padding: 10px;
}
#dialog {
height: 100px;
max-width: 100px;
border: 3px black solid;
padding: 5px;
z-index: 100; // incase of overlaps of divs, this one will remain on top
}
// create your hide/show classes to display and remove the div from display in the way you wish
I have a collapsible set in my jQuery mobile 1.4.0 I want to add a custom animation for this collapsible set when it expands like animation here
my collapsible set at JSFiddle
I have used the following styles to animate the collapsible but it didn't give me the same result.How can I apply this slide down/up animation to my collapsible when its expanded ?
please help me ..
.ui-collapsible-content {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
height: 2em;
overflow: hidden;
}
.ui-collapsible-content-collapsed {
display: block;
height: 0;
padding: 0 16px;
}
Here is my code
$("[data-role='collapsible']").collapsible({
collapse: function( event, ui ) {
$(this).children().next().slideUp(150);
},
expand: function( event, ui ) {
$(this).children().next().hide();
$(this).children().next().slideDown(150);
}
});
This code was tested with jquery mobile 1.4.0.
Thanks.
I have a problem with a div that at the begin is fixed in the bottom-left corner. I need to do it draggable but when I use jquery to do it the bottom position remains and the size of the div changes.
You can see the behavior in this page: http://paraguasparados.com
The div css code is:
.fcp-cpanel{
position:fixed;
bottom:20px;
left:10px;
z-index: 99999;
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('../img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}
The jquery code is:
$jn("#fcp-cpanel").draggable({
containment:"body",
scroll: false,
opacity: 0.35
});
When in firebug I remove the 'bottom' css style it works like it should.
Thanks for any help.
The easiest solution to this is to add a width and height to your fixed draggable <div> to stop it from resizing on drag.
The problem is that you are making a fixed element draggable and so the bottom css attribute is messing it up when you start moving it. A fix for this is to create a container div that has the fixed css attributes and inside you can add the draggable element. Something like this:
css:
.fcp-cpanel-container{
position:fixed;
bottom: 10px;
left:10px;
}
.fcp-cpanel{
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('http://paraguasparados.com/modules/mod_friendchatppd/img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}
html:
<div class="fcp-cpanel-container">
<div class="draggable fcp-cpanel">
<p><b>Amigos Online</b>
<span id="onlusers" class="onlusers">0</span><span onclick="register()"><img title="Registrar" alt="Registrar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/visible.jpg"></span>
<span onclick="maximize()" id="fcp-micon">
<img title="Maximizar" alt="Maximizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/max.jpeg">
<img style="display:none;" title="Minimizar" alt="Minimizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/min.jpeg">
</span>
</p>
</div>
</div>
I set up a working example with your code here: http://jsfiddle.net/NdUNu/.
I tried this and it did what I wanted
$(function() {
$("#draggable").draggable({ containment: "window" });
});