hi i don't know how to solve this issue, to resize div i use "overflow: hidden" but if i put this i can't drag to out of div (i can but is transparent), if I quit it and resize the div doesn't hides:
HTML
<div class="region">
dragg to me MADA FAKA
</div>
<div id="tabs">
<ul>
<li>tab-1</li>
<li>tab-2</li>
<li>tab-3</li>
</ul>
<div id="tabs-1">
<div class="destacado" title="destacado">
DRAGGABLE TO MADAFAKA 1
</div>
</div>
<div id="tabs-2">
<div class="destacado" title="destacado">
DRAGGABLE TO MADAFAKA 2
</div>
</div>
<div id="tabs-3">
<div class="destacado" title="destacado">
DRAGGABLE TO MADAFAKA 3
</div>
</div>
</div>
CSS
#tabs
{
position: fixed;
overflow: hidden;
width: 320px;
height: 150px;
padding: 0.5em;
border: 1px solid black;
z-index: 2;
}
.destacado
{
border: 2px solid black;
}
.region
{
width: 200px;
height: 200px;
border: 2px solid red;
}
JS:
$('#tabs').tabs();
$('#tabs').resizable();
$('#tabs').draggable();
$('.region').sortable(
{
connectWith: '.region',
items: 'div[title="destacado"]'
});
$('#tabs-1, #tabs-2, #tabs-3').sortable(
{
connectWith: '.region',
items: 'div[title="destacado"]'
});
jsFiddle without overflow: hidden: http://jsfiddle.net/hq9Pw/2/
jsFiddle with overflow: hidden: http://jsfiddle.net/hq9Pw/3/
finally solved with this:
connectWith: '.region',
appendTo: 'body',
containment: 'window',
helper: 'clone'
Related
I am working on nested parent and child list item.
Here is demo link https://jsfiddle.net/fahadsheikh/kq5oxbrs/2/
The sortable and draggable working fine but when if one of parent div is empty than draggle not working.
$(document).ready(function() {
// Sort the parents
$(".sortMenu").sortable({
containment: "document",
items: "> div",
tolerance: "pointer",
cursor: "move",
opacity: 0.7,
revert: 300,
delay: 150,
placeholder: "menuPlaceholder",
start: function(e, ui) {
ui.placeholder.height(ui.helper.outerHeight());
}
});
// Sort the children
$(".menuItems").sortable({
items: "> div",
tolerance: "pointer",
containment: "document",
connectWith: '.menuItems'
});
});
$('#btn1').click(function() {
getSortableList('.sortMenu');
})
$('#btn2').click(function() {
getSortableList('.menuItems');
})
function getSortableList(className){
var sortables = $(className);
var myArray = new Array();
sortables.each(function() {
myArray = myArray.concat($(this).sortable('toArray'));
})
alert(myArray.length);
}
.menuGroup {
margin: 10px;
padding: 10px;
border: 1px solid #000000;
}
.menuGroup h2 {
margin: 0;
padding: 0px 0px 20px 0px;
}
.menuItems {}
.menuItem {
margin: 5px;
padding: 10px;
margin-left: 50px;
border: 1px solid #000000;
background-color: #cecece;
}
.menuPlaceholder {
width: 100%x;
height: 50px;
padding: 20px;
display: block;
margin: 0 0 15px 0;
background: #cccccc;
border: 1px dashed #000000;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<button id="btn1">get sortMenu </button>
<button id="btn2">get menuItems </button>
<div class="sortMenu">
<div class="menuGroup">
<h2>Parent #1</h2>
<div class="menuItems">
<div class="menuItem">
Child 1.1
</div>
<div class="menuItem">
Child 1.2
</div>
<div class="menuItem">
Child 1.3
</div>
<div class="menuItem">
Child 1.4
</div>
</div>
</div>
<div class="menuGroup">
<h2>Parent #2</h2>
<div class="menuItems">
<div class="menuItem">
Child 2.1
</div>
<div class="menuItem">
Child 2.2
</div>
</div>
</div>
</div>
This is a known bug.
Applying min-height should fix the issue
Add the following css
<style>
.menuItems {
min-height: 100px;
background: yellow; // optional
}
</style>
I have to use parallax.js to background images in owl carousel. For example I wanna use http://pixelcog.github.io/parallax.js/ with https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html
How can I do it?
pen: https://codepen.io/naaatasha/pen/gRdoej
<div class="owl-carousel slider">
<div class="item slide-wrapper parallax-window" data-parallax="scroll" data-image-src="http://trawnik.nazwa.pl/TrawnikProducent2016/wp-content/uploads/slide-strong-1.jpg">
<div class="container">
<div class="box">
<h2 class="h2 wow fadeIn text-right">co tam</h2>
<span class="subtitle wow fadeIn">ihsisdijbvjd</span>
</div>
</div>
</div>
<div class="item slide-wrapper parallax-window" data-parallax="scroll" data-image-src="http://www.focus.pl/upload/galleries/19/trawa-19061_l.jpg">
<div class="container">
<div class="box">
<h2 class="h2">lorem ipsum</h2>
<span class="subtitle">asdsk jbsjfd</span>
</div>
</div>
</div>
</div>
.slider {
position: relative;
display: table;
}
.box {
display: table-cell;
vertical-align: middle;
width: 1%;
}
.slide-wrapper {
height: 800px;
width: 100%;
background-color: #333;
backround-size: cover;
}
.h2 {
font-size: 40px;
font-weight: 500;
margin: 0;
text-transform: uppercase;
}
.subtitle {
display: block;
font-family: 'latolight', sans-serif;
font-size: 30px;
text-transform: uppercase;
}
.parallax-window {
min-height: 400px;
background: transparent !important;
}
jQuery(document).ready(function() {
jQuery(".slider").owlCarousel({
items: 1,
loop: true,
nav: false,
dots: false,
autoplay: true,
autoplayTimeout: 4000,
animateIn: 'fadeIn',
//onChange : callback
});
// function callback(event) {
// jQuery('.parallax-window').parallax();
// }
});
With select tag draggable does not work. What can I do with this?
<div id="draggable">
<select style="width: 200px;">
</select>
</div>
$(document).ready(function(){
$('#draggable').draggable();
});
Demo: https://jsfiddle.net/wrqLwyk6/2/
This may help you
HTML:
<ul id="draggable">
<li>
<select style="width: 200px;">
<option>56456456456</option>
<option>sdfsdf</option>
</select>
</li>
<ul>
CSS:
#draggable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#draggable li { margin: 0 3px 3px 3px; padding: 0.4em; cursor:move; }
Script:
$(document).ready(function(){
$('#draggable').draggable();
});
Check at : https://jsfiddle.net/759td80m/
Actually, the <div> is draggable, but you should actually click and drag on the <div> itself, not the <select>. Almost all of the form controls like <textarea> blocks dragging in similar way. To test this, just add a background color or something to <div> and drag the remaining area to the right of <select>.
But users wouldn't be aware of this invisible area (if there is any). It is to handle such situations we have the handle option:
$(document).ready(function() {
$('#draggable').draggable({
handle: '.handle'
});
});
#draggable .handle {
display: inline-block;
float: left;
width: 20px;
height: 20px;
background: dodgerblue;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="draggable">
<span class="handle"></span>
<select style="width: 200px;">
</select>
</div>
In the demo, click and drag the blue box which is used as handle.
I have a problem with draggable feature in Internet Explorer.
I have 2 columns, each of them contains a list of cards. I want to drag a card from one column to another.
Problem is when I start dragging, cards from other column are moved as well. This happens only in IE.
HTML:
<div class="card-container">
<div class="card-row">
<div column_id="1" class="card-column drag" style="width: 133px;">
<ul style="height:100%; width:100%" >
<li story_id="2" class="card" style="position: relative;">
<div>Card1</div>
</li>
</ul>
</div>
<div column_id="2" class="card-column drag" style="width: 133px;">
<ul style="height:100%; width:100%" class="snap">
<li story_id="1" class="card" style="position: relative;">
<div>Card2</div>
</li>
</ul>
</div>
</div>
</div>
JS:
$(".drag").find(".card").draggable({
revert: "invalid"
});
$(".card-column").droppable({
accept: ".card",
drop: function( event, ui ) {
$(this).find("ul").append("<li class=\'card ui-draggable\' story_id=\'" + ui.draggable.attr("story_id") + "\' style=\'position: relative;\'>" + $(ui.draggable).html() + "</li>");
ui.draggable.remove();
$(".drag").find(".card").draggable({
revert: "invalid"
});
}
});
CSS:
.card-container{
display: table;
}
.card-column{
display: table-cell;
min-height: 200px;
border: 1px solid #B6B6B6;
}
.card-row{
min-height: 200px;
display: table-row;
}
.card-column ul {
list-style: none outside none;
margin: 0 0px;
padding: 0px 0 0;
position: relative;
}
.card-column ul li{
background: none repeat scroll 0 0 #F6F6F6;
border: 1px solid #D0D0D0;
border-radius: 3px;
margin: 5px;
}
JSFiddle
Im using jQuery UI 1.8.6
How can I prevent other cards to move?
Cheers
In CSS add float:left to .card-column class
.card-column{
display: table-cell;
float:left;/*ADD THIS*/
min-height: 200px;
border: 1px solid #B6B6B6;
}
I have a problem with Openlayers 2.12+ and JQueryUI draggable panel that contains OL tools. The panel locks drag.
CSS:
herramientas {
position: absolute; top: 15px; left: 45px; width: 250px; height: 35px; z-index:99999; cursor: move;
background: #000000; }
#herramientas div {
float: left;
margin: 5px; }
HTML:
<body>
<div id="mapcontainer" style="width: 650px; height: 500px; position: relative">
<div id="map" style="width:100%; height:100%"></div>
<div id="herramientas"></div>
</div>
</body>
JavaScript:
var map, layer;
$(document).ready(function () {
$("#herramientas").draggable({containment: "#mapcontainer"});
map = new OpenLayers.Map( 'map' );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
map.zoomToMaxExtent();
nav = new OpenLayers.Control.NavigationHistory();
map.addControl(nav);
panel = new OpenLayers.Control.Panel(
{div: document.getElementById("herramientas")}
);
panel.addControls([nav.next, nav.previous]);
map.addControl(panel);
});
The code demo can see in http://jsfiddle.net/leal33/49bP9/
The same example with OpenLayers 2.11 working perfectly --> http://jsfiddle.net/leal33/49bP9/1
It's a bug of OpenLayers? Any solution?
Thanks