I've got a jQuery fiddle using the jQuery UI draggable to demonstrate this problem. Here is the HTML:
<div id="container">
<div id="components">
<p>
Components: Click to add a component.
</p>
<div class="component">
<div class="component-title">
One
</div>
</div>
<div class="component">
<div class="component-title">
Two
</div>
</div>
<div class="component">
<div class="component-title">
Three
</div>
</div>
</div>
<div id="workspace">
<div id="pdc">
</div>
</div>
</div>
Here is the CSS:
#workspace {
padding-top: 20px;
clear: both;
}
#pdc {
border: 1px solid #000000;
border-radius: 5px;
width: 300px;
height: 150px;
position: relative;
}
.component-title {
cursor: default;
}
#pdc .component-title {
cursor: move;
}
.component {
border: 1px solid #000000;
border-radius: 5px;
text-align: center;
width: 98px;
height: 48px;
}
#components .component {
float: left;
margin: 0 12px 0 0;
}
#pdc .component {
cursor: move;
display: inline-block;
}
.component-delete {
float: right;
color: pink;
margin-right: 5px;
cursor: pointer;
}
.component-delete:hover {
color: red;
}
Here is the jQuery:
$(document).ready(function() {
$('.component').click(function(){
var lastpdccomponent, html = $(this).clone().prepend('<div class="component-delete">X</div>');
if ($('#pdc').children().length > 0) {
lastpdccomponent = $('#pdc').children().last();
$('#pdc').append(html);
$('#pdc').children().last().position({
my: "left top",
at: "left bottom",
of: lastpdccomponent
});
} else {
$('#pdc').append(html);
}
$('#pdc .component').draggable({
containment: '#pdc',
scroll: false,
grid: [50, 50]
});
});
$('#pdc').on('click', '.component-delete', function() {
$(this).parent().remove();
});
});
It's set up so that if you click a component (One, Two, or Three), the component is cloned and added to the "pdc" div as in the image below:
If you drag the second and third components so that they are in a horizontal row with the first component:
and then delete the first component by clicking the red "X", the other components move outside the container as shown in this image:
I've experimented with other display options for the components, like "inline-block", and it fixes the issue with deleting the first in a horizontal row of components, but introduces a new problem when the first in a vertical row of components is deleted; in that case, the remaining elements move off to the left of the container.
How can I prevent the other components from moving outside the container when the first component in the row is deleted?
The position of the .component's is relative and thus is being calculated based on the preceding element. Once you remove the first one, the position for the follow ups is getting calculated not correctly any more. In order to prevent that behavior, just add position:absolute; to #pdc .component{ in css to make the calculation of position of the components independent from each other, see snippet:
UPDATE I see when there is a scrollbar, positioning of the elements is getting messed up, so in order to solve this issue add collision: 'none' to
$('#pdc').children().last().position({
my: "left top",
at: "left bottom",
of: lastpdccomponent,
collision: 'none'
});
See updated snippet:
$(document).ready(function() {
$('.component').click(function(){
var lastpdccomponent, html = $(this).clone().prepend('<div class="component-delete">X</div>');
if ($('#pdc').children().length > 0) {
lastpdccomponent = $('#pdc').children().last();
$('#pdc').append(html);
$('#pdc').children().last().position({
my: "left top",
at: "left bottom",
of: lastpdccomponent,
collision: 'none'
});
} else {
$('#pdc').append(html);
}
$('#pdc .component').draggable({
containment: '#pdc',
scroll: false,
grid: [50, 50]
});
});
$('#pdc').on('click', '.component-delete', function() {
$(this).parent().remove();
});
});
#workspace {
padding-top: 20px;
clear: both;
}
#pdc {
border: 1px solid #000000;
border-radius: 5px;
width: 300px;
height: 150px;
position: relative;
}
.component-title {
cursor: default;
}
#pdc .component-title {
cursor: move;
}
.component {
border: 1px solid #000000;
border-radius: 5px;
text-align: center;
width: 98px;
height: 48px;
}
#components .component {
float: left;
margin: 0 12px 0 0;
}
#pdc .component {
cursor: move;
position:absolute;
}
.component-delete {
float: right;
color: pink;
margin-right: 5px;
cursor: pointer;
}
.component-delete:hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div id="container">
<div id="components">
<p>
Components: Click to add a component.
</p>
<div class="component">
<div class="component-title">
One
</div>
</div>
<div class="component">
<div class="component-title">
Two
</div>
</div>
<div class="component">
<div class="component-title">
Three
</div>
</div>
</div>
<div id="workspace">
<div id="pdc">
</div>
</div>
</div>
Set you .component to position: absolute; and this should fix it since your container #pdc is already set to position: relative;. When you delete the element that the others are positioned relative off of everything goes crazy, but when they are absolutely positioned they should stay put.
Also set the #components .component to position: static; because you don't need those positioned.
See this fiddle for a demo
CSS Changes:
.component {
position: absolute; /*Add this*/
border: 1px solid #000000;
border-radius: 5px;
text-align: center;
width: 98px;
height: 48px;
}
#components .component {
position: static; /*Add this*/
float: left;
margin: 0 12px 0 0;
}
The problem is that on click of .component-delete, the components don't get 'reset' to their default positions, and have an inline height of -50px (and a left offset).
You can resolve this by resetting their positions manually, adding:
$(this).parent().siblings().css('top', '0');
$(this).parent().siblings().css('left', '0');
To the deletion function, resulting in the following:
$('#pdc').on('click', '.component-delete', function() {
$(this).parent().siblings().css('top', '0');
$(this).parent().siblings().css('left', '0');
$(this).parent().remove();
});
This will make the second and third element move two the left and stack vertically when deleting the first element, as can be seen working here.
Unfortunately I don't think it's possible to keep the remaining two elements in a horizontal line on deletion, as if you omit resetting the height position, the second element would take on the height offset from the first. Hopefully this is still sufficient.
Hope this helps! :)
Related
I'm trying to create the below situation where the content_container's width reaches the right side of the screen and automatically scales depending on whether the expandable pane is collapsed or not. If I put width: 100% on .content_container it goes past the width of the screen, creating an unnecessary scroll bar as well as shifts to being under the expandable pane. Also you can see that the expandable_pane's height does not reach the full extent of the parent, but the content_container's does.
There is obviously something I'm not understanding on a fundamental level as I will admit that my grasp of various display types and behaviors is not solid and I'm still learning. Any help would be appreciated.
$(document).ready(function(){
$("#expandable_pane").click(function(){
if(this.className.search("collapsed") != -1){
this.className = this.className.replace("collapsed", "extended");
} else {
this.className = this.className.replace("extended", "collapsed");
}
})
})
.expandable_pane{
float: left;
box-shadow: 1px 1px 10px 1px rgb(98,98,98);
overflow: hidden;
white-space: nowrap;
height: 100%;
padding: 2px;
transition: width .5s;
}
.expandable_pane.collapsed {
width: 10px;
}
.expandable_pane.extended {
width: 500px;
}
.flex_container {
height: 300px;
}
.content_container{
float: left;
padding-left: 10px;
height: 100%;
}
.content_pane {
padding: 10px;
box-shadow: 1px 1px 10px 1px rgb(98,98,98);
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex_container">
<div class="expandable_pane collapsed" id="expandable_pane">
Menu Icons/Links would go here.
</div>
<div class="content_container">
<div class="content_pane">
Information for page here.
</div>
</div>
</div>
You aren't that far off with your code. First of all, your .flex_container class is missing display: flex. Secondly, if you want your container to take up the remainder of the space, it needs to be able to flex. If you give the container flex: 1 100px, which is a shorthand property, it tells the container to flex-grow: 1 with a flex-basis of 100px. With flexbox, you no longer need float: left in this scenario.
Try playing around with the values to get a better grasp of how flexbox can work and I also recommend reading the MDN articles on the property. MDN Flex
$(document).ready(function(){
$("#expandable_pane").click(function(){
if(this.className.search("collapsed") != -1){
this.className = this.className.replace("collapsed", "extended");
} else {
this.className = this.className.replace("extended", "collapsed");
}
})
})
.expandable_pane{
box-shadow: 1px 1px 10px 1px rgb(98,98,98);
overflow: hidden;
white-space: nowrap;
height: 100%;
padding: 2px;
transition: width .5s;
}
.expandable_pane.collapsed {
width: 10px;
}
.expandable_pane.extended {
width: 500px;
}
.flex_container {
display: flex;
height: 300px;
}
.content_container{
padding-left: 10px;
flex: 1 100px;
height: 100%;
}
.content_pane {
padding: 10px;
box-shadow: 1px 1px 10px 1px rgb(98,98,98);
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex_container">
<div class="expandable_pane collapsed" id="expandable_pane">
Menu Icons/Links would go here.
</div>
<div class="content_container">
<div class="content_pane">
Information for page here.
</div>
</div>
</div>
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
});
Is it possible to give the hover-icon a class, so that the icon is the triggerinfo? The image is in gray when i hover it, it gets colored but I wan't to hover a text when is colored, when I going over the little icon. Is there a way overlapping the div with the triggerinfo class over the image, but not leaving the hover of the image. Like hover the div that is not visible and not leaving the hover effect colored ?
Thanks !
If it helps I can share the link to my website, but only as message not for the public post. It gets more visual, and I think better to understand what I mean.
jQuery(document).ready(function() {
jQuery(".triggerinfo").mouseleave(function() {
jQuery(this).next(".info").hide();
});
jQuery(".triggerinfo").hover(function() {
jQuery(this).next(".info").toggle("fade");
});
});
.info {
display: none;
padding: 10px;
background: #fff;
position: absolute;
box-sizing: border-box;
z-index: 1;
}
.triggerinfo {
display: inline-felx;
opacity: 0.1;
position: absolute;
margin-top: -50px;
margin-left: 30px;
z-index: 3;
}
.uk-overlay-icon:before {
content: "\f0c9";
position: absolute;
top: 90%;
left: 10%;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
line-height: 1;
font-family: FontAwesome;
text-align: center;
color: #f69c00;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-uk-filter="dsgf" data-grid-prepared="true" style="position: absolute; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; top: 0px; left: 0px; opacity: 1;">
<div class="uk-panel">
<div class="uk-panel-teaser">
<figure class="uk-overlay uk-overlay-hover ">
<img src="/wp-content/uploads/bilder/projekte/dsf.jpg" class="uk-overlay-grayscale" alt="dfsg">
<div class="uk-overlay-panel uk-overlay-icon uk-overlay-fade"></div>
<a class="uk-position-cover" href="/wp-content/plugins/widgetkit/cache/nuding-35281426b204ba8667e05928e60e8a11.jpg" data-lightbox-type="image" data-uk-lightbox="{group:'.wk-1b2a'}" title="dsfg"></a>
</figure>
</div>
<div>
<div class="triggerinfo">
sdf
</div>
<div class="info">
<h5>dsfg</h5>
</div>
</div>
</div>
</div>
The Fiddlejsfiddle.net/e8qd8gvf/3/ works now as it should on my site. Now the thing is: on hover the img get colored and it appears a little icon in the bottom left coner, the trigger that is now under the img should be this little icon, because the icon is from the css definition in uk-overlay-icon (from the font awesome)
I dont now how to set the info class on this icon.
Or I was trying put an div with the info class over the img at the position of the icon and than trigger it, but than the colored effekt dont show when I trigger it, so I thought there must be a way to trigger the div on hover and not lose the colored effect, so the trigger div would trigger the Info and musst trigger the hover from the img at the same time
PS: Sorry for the long css !
The <figure> element is intended to mark up diagrams, illustrations, photos, code examples and similar content, "that can be moved away from the main flow of the document without affecting the document’s meaning" (http://w3c.github.io/html-reference/figure.html).
Your way of using it seems to be against this specification.
It's your own responsibility to code according to specification and best practices.
I just opted with your provided example: https://jsfiddle.net/e8qd8gvf/4/
I moved the uk-overlay-icon outside of the figure, added the toggle-info class and put the info box inside it.
All that was left was adding some CSS:
.uk-position-cover { cursor: default; }
.uk-panel-teaser { position: relative; }
.toggle-info {
display: none;
cursor: pointer;
position: absolute; bottom: 20px; left: 20px;
width: 30px; height: 30px;
}
.toggle-info > .info {
width: 150px; height: 150px;
border: 2px solid red;
position: absolute; bottom: -20px; left: 10px;
transform: translateY(100%);
}
.toggle-info, .info { display: inline-block !important; }
.toggle-info.hidden, .info.hidden { display: none !important; }
as well as changing your JS to:
jQuery(document).ready(function() {
jQuery(".uk-overlay").hover(
function() {
jQuery(this).next(".toggle-info").removeClass("hidden");
},
function() {
jQuery(this).next(".toggle-info").addClass("hidden");
}
);
jQuery(".toggle-info").hover(
function() {
jQuery(this)
.removeClass("hidden")
.children(".info").removeClass("hidden");
},
function() {
jQuery(this)
.addClass("hidden")
.children(".info").addClass("hidden");
}
);
});
My solution is only showing you a way to accomplish things and is by far not "nice". You need to adapt it yourself and to specifications.
I want to make a vertically draggable division of two areas like the following.
I just want to modify a online example of draggable divs to be what I want. Finally, I got this. Can someone give me some hints to modify it?
JSFiddle Link : https://jsfiddle.net/casperhongkong/omekvtka/14/
HTML
<div class="container">
<div class="area1">
Area 1
</div>
<div class="drag">
</div>
<div class="area2">
Area 2
</div>
</div>
CSS
.container {
position: fixed;
top: 51px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: #272822;
border: 1px solid #222;
// margin: 0 auto;
//display: inline-block;
}
.area1 {
position: absolute;
height: 100%;
width: 30%;
background-color: #ddd;
display: inline-block;
}
.drag {
position: fixed;
width: 5px;
height: 100%;
background-color: #444;
display: inline-block;
}
.area2 {
position: absolute;
right: 0;
height: 100%;
width: 30%;
background-color: #ddd;
display: inline-block;
}
JavaScript
$(document).ready(function() {
$('.drag').on('mousedown', function(e) {
var $area1 = $('.area1'),
$area2 = $('.area2'),
startWidth_a1 = $area1.width(),
startWidth_a2 = $area2.width(),
pX = e.pageX;
$(document).on('mouseup', function(e) {
$(document).off('mouseup').off('mousemove');
});
$(document).on('mousemove', function(me) {
var mx = (me.pageX - pX);
$area1.css({
width: startWidth_a1 - mx;
});
$area2.css({
//left: mx / 2,
width: startWidth_a2 - mx,
//top: my
});
});
});
});
For javascript, I would recommend checking out a library, as this is slitghtly more complicated than just a few lines. #fauxserious gave Split.js as a fantastic example.
This is possible in pure HTML/CSS, though slightly limited, as discussed here.
HTML:
<div class="split-view">
<div class="resize-x panel" style="width: 216px;">
Panel A
</div>
<div class="panel">
Panel B
</div>
</div>
CSS:
/* Panels: */
.panel{
padding: 1em;
border-width: 6px;
border-style: solid;
height: 4em;
}
/* Resizing */
.resize-x {
resize: horizontal;
overflow: auto;
}
/* Split View */
.split-view {
margin: 1em 0;
width: 100%;
clear: both;
display: table;
}
.split-view .panel {
display: table-cell;
}
Based on #afischer's table-cell solution, here is an alternative one.
I have had to put accordions within the left side panel.
The sticky headers of the accordions require overflow to be visible,
while resize requires overflow to be anything but visible:
https://caniuse.com/#feat=css-sticky.
In the same time, I didn't need anything to place into the right side panel.
Thus, an overcome was employing resize on the right panel, and rotating by 180 deg to get the dragable side to the middle, as well as this way the dragable corner relocated to the top (visible without scrolling).
Plus some highlight has been added to the dragable corner.
/* Panels: */
.panel{
padding: 1em;
border-width: 6px;
border-style: solid;
height: 4em;
}
/* Resizing */
.resize-x {
resize: horizontal;
overflow: auto;
transform: rotate(180deg);
border-right: solid gray 1px;
}
/* Split View */
.split-view {
margin: 1em 0;
width: 100%;
clear: both;
display: table;
}
.split-view .panel {
display: table-cell;
}
.resize-x::-webkit-resizer {
border-width: 8px;
border-style: solid;
border-color: transparent orangered orangered transparent;
}
<div class="split-view">
<div
class="panel"
style="width: 216px;">
Panel A
</div>
<div class="panel resize-x">
Panel B
</div>
</div>
Unfortunately there are two disappointing thing with the above:
Firefox cannot handle the combination of table-cell and resize
Only a corner of the grabber is responsive, which can even be scrolled out easily
Here is an other solution which also takes the above two problems into account
without resize CSS property
and with full height responsive grabber
It's a combination of a flexbox and an input:range slider.
The trick is that the pointer-event CSS property can be different
on the slider's background
and on its grabber.
The slider covers the entire view. The background of the slider is transparent for the events too (pointer-events: none), while the dragbar itself catches the events (pointer-events: auto).
It requires minor Javascript and because I've implemented the production version in Nuxt.js, I use Vue.js here, instead of vanilla JS.
new Vue({
el: '#vue',
data: {
windowWidth: null,
splitWidth: null,
},
mounted() {
this.windowWidth = window.innerWidth;
// For arbitrary initial position:
this.splitWidth = this.windowWidth * 2/3;
},
computed: {
flexRatio() {
return this.splitWidth / this.windowWidth;
}
}
})
body {
margin:0;
}
main {
display: flex;
width: 100%;
height: 100vh;
}
article {
display: flex;
}
section {
width: 100%;
height: 100%;
text-align: justify;
padding: 20px;
}
.section-left {
background-color: darkseagreen;
}
.section-right {
background-color: orangered;
}
#split-grabber {
pointer-events: none;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
-webkit-appearance: none;
/* Safari allows dragging behind scroll bar.
We fix it by shrinking its width on the right side via both
its range value :max="windowWidth - 12"
and its width (CSS) width: calc(100% - 12px)
...synchronously */
width: calc(100% - 12px);
height: 100vh;
background: transparent;
outline: none;
margin: 0;
}
#split-grabber::-webkit-slider-thumb {
z-index: 1;
pointer-events: auto;
-webkit-appearance: none;
appearance: none;
width: 5px;
height: 100vh;
background: lightgray;
box-shadow: 1px 2px 2px 0px gray;
cursor: col-resize;
}
#split-grabber::-moz-range-thumb {
z-index: 1;
pointer-events: auto;
-webkit-appearance: none;
appearance: none;
width: 5px;
height: 100vh;
background: lightgray;
box-shadow: 1px 2px 2px 0px gray;
cursor: col-resize;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<main id="vue">
<!-- Safari allows dragging behind scroll bar
We fix it by shrinking its width on the right side via both
its range value :max="windowWidth - 12"
and its width (CSS) width: calc(100% - 12px)
...synchronously -->
<input
id="split-grabber"
type="range"
v-model="splitWidth"
:max="windowWidth - 12"
>
<article
class="article"
:style="{'flex': flexRatio}"
>
<section
class="section section-left">
splitWidth:{{ splitWidth }}px<br>
“There was a rich man who always dressed in the finest clothes and lived in luxury every day.
And a very poor man named Lazarus, whose body was covered with sores, was laid at the rich man’s gate.
He wanted to eat only the small pieces of food that fell from the rich man’s table. And the dogs would come and lick his sores.
Later, Lazarus died, and the angels carried him to the arms of Abraham. The rich man died, too, and was buried.
In the place of the dead, he was in much pain. The rich man saw Abraham far away with Lazarus at his side.
He called, ‘Father Abraham, have mercy on me! Send Lazarus to dip his finger in water and cool my tongue, because I am suffering in this fire!’
</section>
</article>
<article
class="article"
:style="{'flex': 1-flexRatio}"
>
<section class="section section-right">
But Abraham said, ‘Child, remember when you were alive you had the good things in life, but bad things happened to Lazarus. Now he is comforted here, and you are suffering.
Besides, there is a big pit between you and us, so no one can cross over to you, and no one can leave there and come here.’
The rich man said, ‘Father, then please send Lazarus to my father’s house.
I have five brothers, and Lazarus could warn them so that they will not come to this place of pain.’
But Abraham said, ‘They have the law of Moses and the writings of the prophets; let them learn from them.’
The rich man said, ‘No, father Abraham! If someone goes to them from the dead, they would believe and change their hearts and lives.’
But Abraham said to him, ‘If they will not listen to Moses and the prophets, they will not listen to someone who comes back from the dead.’”
</section>
</article>
</main>
Hi I have a draggable div and a droppable div and I would like it so that when i drop a div in the droppable div, the dropable div expands to contain the dropped div. Now it is overflowing. I tried implementing an outer wrapppe. I also tried implementing display:inline block because I heard that if you do that to a parent the size of the parent would be the inner content.
script:
$(document).ready(function(){
$("#draggable2").draggable({
// opacity : 0.7,
helper:"clone",
scope: 1,
start: function(e, ui){
$(ui.helper).addClass("drag-helper");
console.log(ui);
}
})
$("#droppable").droppable({
drop: function(){
var cloned = $("#draggable2").clone().css({"margin" : "0"})
$(this).css("background-color" , "green");
if($(".outerwrapper").length == 0){
$(this).wrapInner("<div class = 'outerwrapper'></div>");
}
$(".outerwrapper").append(cloned)
},
scope: 1
})
});
CSS:
#draggable2{
width: 90px;
height: 90px;
padding: 0.5em;
border :5px solid gray;
background-color: red;
display: inline-block;
margin-right: 50px;
vertical-align:middle;
}
#droppable{
width: 120px;
height: 120px;
padding: 0.5em;
border :5px solid black;
background-color: #777;
display: inline-block;
vertical-align:middle;
}
.drag-helper{
width: 50px;
height: 50px;
padding: 0.5em;
border :5px solid gray;
background-color: red;
display: inline-block;
margin-right: 50px;
vertical-align:middle;
opacity: 0.5;
border-radius: 100%;
}
.outerwrapper{
width: 100%;
height: 100%;
display: inline-block;
}
fiddle shows that when you drag and drop the draggable div multiple times over the drop box they overflow. I want them to be contained. I may want them to be contained horizontally or vertically. so maybe they could be floated left inside the outer container or stacked on top of each other going down the div.
Thank you in advance.
You can add this:
$(this).css("height", "100%");
to your jQuery code after the:
$(".outerwrapper").append(cloned)
Here is the edited JSFiddle for your review: http://jsfiddle.net/zLzR9/1/
just change this line of css:
#droppable {
…
height: 120px;
…
}
to :
#droppable {
…
min-height: 120px;
…
}
The same will work for width.