Using JQuery draggable/droppables to allow me to drag divs from one container to another and have them inserted as children into the container. I can see the move in HTML but on the screen the div disappears when i release the draggable into the target.
http://jsfiddle.net/laurencefass/tqqLxquL/2/
<div id="left" class="droppable">
<div class="draggable">1</div>
<div class="draggable">2</div>
<div class="draggable">3</div>
<div class="draggable">4</div>
</div>
<div id="right" class="droppable">drag blocks in here</div>
JQuery
$('.draggable').draggable();
$(init);
function init() {
$('.draggable').draggable();
$('.droppable').droppable({
drop: handleDropEvent
});
}
css
.draggable {
width:50px;
height:50px;
background:gray;
padding:5px;
margin:5px;
border-radius:10px;
z-index:100;
display:block;
}
.droppable {
box-sizing:border-box;
border:2px solid black;
width:50%;
float:left;
min-height:300px;
}
Here is a working exemple of what I understood you want to do.
http://jsfiddle.net/tqqLxquL/5/
The dragged element have a left property when dropped, you have to override it.
function handleDropEvent( event, ui ) {
console.log($(ui.draggable[0]));
var $draggable = $(ui.draggable[0]);
$draggable.appendTo(this);
$draggable.css({
left: 0
})
}
Related
I am seeing unexpected behaviour on a small HTML widget ive recently created. Three successively embedded divs each one has a marker and a menu which show up on entry into the div and hide on exit. The marker is intended to track the vertical mouse position. Problem here is that the mouseover event fires only when the mouse is over the marker and not when the mouse over the containing div.
http://jsfiddle.net/laurencefass/f47a7a2r/
$( ".outer, .inner, .middle" )
.mouseenter(function(e) {
$(this).children(".content:first").show();
$(this).parents().children(".content:first").hide();
$(this).children(".marker:first").show();
$(this).parents().children(".marker:first").hide();
})
.mouseleave(function(e) {
$(this).children(".content:first").hide();
$(this).parents().children(".content:first").show();
$(this).children(".marker:first").hide();
$(this).parents().children(".marker:first").show();
})
.mouseover(function(e) {
$(".content", $(this)).html("left = " + e.pageX + " right = " + e.pageY);
var marker = $(this).children(".marker");
marker.offset({top:e.pageY - marker.height()/2, right:0});});
.outer, .middle, .inner {
font-size:0.8em;
position:absolute;
border:5px solid black;
background-color:lightgray;
text-align:center;
}
.outer {
top:10%;
left:10%;
width:80%;
height:500%;
}
.middle {
top:5%;
left:20%;
width:60%;
height:60%;
}
.inner {
top:5%;
left:30%;
width:40%;
height:60%;
}
.content {
background-color:aliceblue;
min-height:2em;
min-width:50px;
display:none;
}
.marker {
height:50px;
width:5em;
background-color:black;
position:absolute;
right:0px;
margin-right:2px;
display:none;
color:white;
fontsize:0.8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="outer">
<div class="content">outer menu</div>
<div class="marker">widget</div>
<div class="middle">
<div class="content">middle menu</div>
<div class="marker">widget</div>
<div class="inner">
<div class="content">inner menu</div>
<div class="marker">widget</div>
</div>
</div>
</div>
This can be done much easier just using CSS. You can use this functionallity for your widgets too.
.outer:hover>.content,
.middle:hover>.content,
.inner:hover>.content{
display: block;
}
Then you can strip out your mouseenter and mouseleave
$( ".outer, .inner, .middle" )
.mouseover(function(e) {
var marker = $(this).children(".marker");
marker.offset({top:e.pageY - marker.height()/2, right:0});
});
JSFiddle
If you only want to show the widget of the element hovered you have to use jQuery, Furthermore you would probably use mosemove() event to have it at the mouse position all the time.
$( ".outer, .inner, .middle" ).mousemove(function(e) {
e.stopPropagation();
var marker = $(this).children(".marker");
marker.eq(0).show();
marker.offset({top:e.pageY - marker.height()/2, right:0});
});
$( ".inner, .middle" ).mouseenter(function(e) {
if($('.marker', $(this).parent()).eq(0).length){
$('.marker', $(this).parent()).eq(0).hide();
}
});
$( ".outer, .inner, .middle" ).mouseleave(function(e) {
if($('.marker', $(this).eq(0)).length){
$('.marker', $(this).eq(0)).hide();
}
});
JSFiddle
my expectation: a rhs "floating" widget to track the vertical position of the mouse and be visible only as long as the cursor is within scope of the marker's container.
Using Jquery Sortable. I want to do a simple css switch function so that I can change the background colour of the field I have selected (<div class='bar-across') from a white to a yellow bg using a css class .selected (<div class="bar-across selected">) . When I release the mouse / click, I would like for it to return to its original state.
Fiddle
HTML:
<div id="reorder-list">
<div id="listItem_1" class="bar-across CF"><span class="handle">Drag</span>Item 1</div>
<div id="listItem_2" class="bar-across CF"><span class="handle">Drag</span>Item 2</div>
<div id="listItem_3" class="bar-across CF"><span class="handle">Drag</span>Item 3</div>
</div>
Javascript:
$(document).ready(function () {
$("#reorder-list").sortable({
placeholder: "destination",
forcePlaceholderSize: true,
handle: '.handle',
update: function () {
var order = $('#reorder-list').sortable('serialize');
$("#info").load("billboard-sort.php?" + order);
}
});
});
CSS:
.bar-across {
background:#fff;
border:1px solid #ccc;
margin-bottom:5px;
width: 100%;
}
#reorder-list div .handle {
cursor: move;
padding:0;
float:left;
background:#0C6;
padding: 10px;
}
.destination {
background:#1c5dbb;
width: inherited;
}
.selected {
background:#FF0;
}
/* Clearfix
============================================================================ */
/* Clearfix */
.CF:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.CF {
display:inline-block;
}
Have a look into the events start and stop in the Sortable API. By using them, you can just add or remove your desired class to/from the current, dragged element. Access is possible via
$(ui.item).doStuff();
where ui is of course the second of the event callback parameter.
I have to flip an image in my project and im using a function in combination with css to implement it. When it's flipped, it shows another div en when flipped again ofcourse back to the original div. But when I click nothing happens. So something is still wrong, but no idea what.
Javascript:
<script type="text/javascript">
$(document).ready(function () {
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click", function () {
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if (elem.data('flipped')) {
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped', false);
}
else {
// Using the flip method defined by the plugin:
elem.flip({
direction: 'lr',
speed: 350,
onBefore: function () {
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped', true);
}
});
});
HTML:
<div class="sponsorListHolder">
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip" >
<img src="Images/edan.png" alt="More about Edan" id="test" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
Edan
</div>
<div class="sponsorURL">
<!-- Edan-->
</div>
</div>
</div>
CSS:
.sponsorListHolder{
margin-bottom:30px;
}
.sponsor{
width:180px;
height:180px;
float:left;
margin:4px;
/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}
.sponsorFlip{
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
}
.sponsorFlip:hover{
border:1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}
.sponsorFlip img{
/* Centering the logo image in the middle of the sponsorFlip div */
position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
}
.sponsorData{
/* Hiding the .sponsorData div */
display:none;
}
.sponsorDescription{
font-size:11px;
padding:50px 10px 20px 20px;
font-style:italic;
}
.sponsorURL{
font-size:10px;
font-weight:bold;
padding-left:20px;
}
I have included the jquery plugin:
<script type="text/javascript" src="js/jquery.flip.min.js"></script>
Greets
I guess you have added the Jquery, and you may also add the Jquery UI
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
before
<script type="text/javascript" src="js/jquery.flip.min.js"></script>
http://lab.smashup.it/flip/ On the right side, it mentions that this plugin depends on Jquery and Jquery UI.
Hope it works.
I am trying to drag an element from a container which is an overflow:hidden div. While dragging , the element goes behind the container (looks as if it's behind the screen).The draggable elements should be dragged outside of their container and remain visible once they are outside.
LINK TO THE FIDDLE
Please note that
1)I cannot use the appendTo inside the draggable(Because it'll cause me issues elsewhere)
2)I cannot use helper:clone again for the same reason.
The complete code follows.
HTML
<div id='outer_container'>
<div id = 'inner_container'>
<div class = 'draggable_element'></div>
<div class = 'draggable_element'></div>
<div class = 'draggable_element'></div>
</div>
</div>
CSS
#outer_container
{
background:#ededed;
position:absolute;
top:100px;
left:40px;
width:400px;
height:100px;
overflow:hidden;
}
#inner_container
{
position:absolute;
width:2000px;
height:100px;
top:0px;
left:0px;
background:#ededed;
}
.draggable_element
{
position:relative;
width:90px;
height:80px;
top:10px;
left:20px;
margin-right:50px;
background:#ff9600;
float:left;
}
SCRIPT
$('.draggable_element').draggable();
I am hoping that somebody can point me in the right direction.Thanks!
I saw a fiddle. When cursor is hovering over it, it animates from bottom to top.
How could I change it, so that on click, it would animate from right to left, and after that, the content would be hidden? When the content is hidden, there would be a button, where I could click to have the content show up again.
HTML
<html>
<body>
<div class="wrapper">
<div class="inner">
Sliding div here!! Yay!!
</div>
</div>
<p>Hover over red div please!!</p>
</body>
</html>
CSS
.wrapper{
background-color:red;
width:200px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner{
width:200px;
height:100px;
position:absolute;
background-color:black;
margin-top:200px;
color:white;
}
jquery
$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();
$(".wrapper").hover(function(){ $(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);
});
});
and here is the fiddle http://jsfiddle.net/qGVfp/
There's 2 changes you need to make. First adjust the stylesheet so the moving div is off to the left instead of the bottom:
.inner{
width:200px;
height:100px;
position:absolute;
background-color:black;
left:-200px;
color:white;
}
And then change the javascript to react to clicks, be based on width and modify the left property. Note, there is a toggle method that behaves a lot like hover, but it's getting removed from jQuery, so you have to have a boolean that tracks state.
$(document).ready(function(){
var width = $(".inner").width();
var toggle = true;
$(".wrapper").click(function(){
if(toggle) {
$(".inner").stop().animate({left:0},1000);
} else {
$(".inner").stop().animate({left:-width},1000);
}
toggle = !toggle;
});
});
Here's an updated fiddle: http://jsfiddle.net/qGVfp/30/
.wrapper2{
background-color:blue;
width:400px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner2{
width:200px;
height:200px;
position:absolute;
background-color:black;
margin-left:400px;
color:white;
}
$(".wrapper2").hover(function(){
$(".inner2").stop().animate({marginLeft:200},1000);
//alert(innerHeigth)
},function(){
$(".inner2").stop().animate({marginLeft:400},1000);
});
});
http://jsfiddle.net/bighostkim/vJrJh/
You are basically there just need to change a few things around.
HTML
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<div class="inner">
Sliding div here!! Yay!!
</div>
</div>
<button id="btn">click</button>
</body>
</html>
CSS
.wrapper {
background-color:red;
width:200px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner {
width:200px;
height:100px;
position:absolute;
background-color:black;
left:200px;
color:white;
}
SCRIPT
var hidden = true;
$(document).ready(function(){
$("#btn").click(function() {
if(hidden) {
$(".inner").stop().animate({left:0}, 1000);
hidden = false;
}
else {
$(".inner").stop().animate({left:200},1000);
hidden = true;
}
});
});
Here is a fiddle to show this: http://jsfiddle.net/qGVfp/31/