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 this setup. JSFiddle link.
$('.item').draggable({
helper: 'clone',
connectToSortable: '.first-sortable, .second-sortable',
});
$('.first-sortable').sortable({
connectWith: '.second-sortable',
receive: function () {
$('.logger1').addClass('animated');
setTimeout(function () {
$('.logger1').removeClass('animated');
}, 300);
}
});
$('.second-sortable').sortable({
connectWith: '.first-sortable',
receive: function () {
$('.logger2').addClass('animated');
setTimeout(function () {
$('.logger2').removeClass('animated');
}, 300);
}
});
.item {
width: 50px;
height: 50px;
background: red;
display: inline-block;
margin-right: 5px;
}
.container {
position: relative;
margin-bottom: 20px;
}
.first-sortable {
height: 100px;
background: blue;
}
.second-sortable {
position: absolute;
left: 50%;
width: 200px;
transform: translateX(-50%);
top: 0;
bottom: 0;
background: rgba(3, 3, 3, .8);
z-index: 10;
padding-left: 20px;
}
.logger2,
.logger1 {
transition: all .3s color;
}
.animated {
color: blue;
}
<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 class="container">
<div class="first-sortable"></div>
<div class="second-sortable"></div>
</div>
<div class="item"></div>
<div class="logger1">Blue Sortable Receive</div>
<div class="logger2">Dark Sortable Receive</div>
The main idea is that, as you can see, is that the dark sortable is above the first one, it is positioned using position: absolute and z-index. I have a little bit of opacity for the black one, just so I can look what happens with the first sortable.
Below the bottom red square we have two indicators that shows when receive event is fired on the specific sortable.
Please note the fact that when you drop an item onto the blue sortable, only indicator for this sortable is fired. When I drop a new item onto the black a receive event is fired on both sortables.
Is this behavior a desired one? I think, in this case just the dark one have to receive this event.
I wonder if this is not jQuery UI bug. Ticket.
I have a jQuery tab, I have some tabs. I have a jquery-ui accordion with two panels, section 1 and section 2 in the first tab. Also another accordion with two panels in the second tab. For some reason, the panels' (divs within h3 tags) height for accordion on second tab are set to 0px and display:none and vertical scroll is appearing for both panels as i have seen with internet explorer debugger (see image attached in the link): http://snag.gy/6pmYd.jpg
The problem is only with the accordion on the second tab: panels are not resized to the tallest one. is it a bug of jQuery tab?
<style>
/* IE has layout issues when sorting (see #5413) */
.group { zoom: 1 }
</style>
<div id="tabs">
<ul>
<li>Components</li>
<li>Capsules</li>
</ul>
<div id="ComponentsTab">
<div id="accordion"> <!-- style= "width: 790px;" -->
<div class="group">
<!-- First Panel 'Add Component' -->
<h3>Add component</h3>
<div>
#using (Html.BeginForm("AddField", "Configure", FormMethod.Post))
{
<label id="NumberOfItems" for="amount">#Resource.ComponentNumberOfItems</label>
<input type="text" name="amount" id="amount" />
<div id="slider-range-max"></div>
<div id="componentId">
#Html.LabelFor(m => m.ComponentViewModel.SelectedCompTypeId, new { #id = "componentIdLabel" })
#Html.DropDownListFor(m => m.ComponentViewModel.SelectedCompTypeId,
Model.ComponentViewModel.CompTypeItems)
</div>
<div class="componentGroup">
<label id="NameCompLabel" for="NameComp">Name:</label>
#Html.TextBox("NameComp", null, new { #class = "textStyle" })
</div>
<div class="componentGroup">
<label id="DescCompLabel" for="DescComp">Description:</label>
#Html.TextBox("DescComp", null, new { #class = "textStyle" })
</div>
<div class="componentGroup">
<input id="submitAddComp" type="submit" value="#Resource.ButtonTitleAddComponent" />
</div>
}
</div> <!-- end first panel 'Add Component' -->
</div> <!-- end group -->
<div class="group">
<!-- Second Panel 'Filter' -->
<h3>Filters</h3>
<div>
#using (Ajax.BeginForm("Search", "Component",
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "jqGrid",
OnSuccess = "showGrid()"
}))
{
<!-- Drop down list for component types -->
<div id = "componentTypeFilter">
#Html.LabelFor(m => m.ComponentViewModel.SelectedCompTypeId, new { id = "componentFilterLabel" })
#Html.DropDownListFor(m => m.ComponentViewModel.SelectedCompTypeId, Model.ComponentViewModel.CompTypeItems)
</div>
<!-- Apply filter button for components -->
<div id="ApplyFilterComponents" >
<input type="submit" name="_search" value="#Resource.CaptionComponentApplyFilter" />
</div>
}
</div>
</div> <!--end group -->
</div> <!-- end accordion -->
<!--
<div id="jqGrid">
#Html.Partial("../Grids/_ComponentGrid")
</div>
-->
</div> <!-- End First tab -->
<div id="OthersTab">
<div id="accordion2"> <!-- style ="width: 790px;" -->
<div class="group">
<h3>Add others</h3>
<div>
#using (Html.BeginForm("AddOthers", "Configure", FormMethod.Post))
{
<div id="itemId">
#Html.LabelFor(m => m.ItemViewModel.SelectedItemTypeId, new { #id = "itemIdLabel" })
#Html.DropDownListFor(m => m.ItemViewModel.SelectedItemTypeId,
Model.ItemViewModel.TypeItems)
</div>
<div class="itemGroup">
<label id="NameItemLabel" for="NameItem">Name:</label>
#Html.TextBox("NameItem", null, new { #class = "textStyle" })
</div>
<div class="itemGroup">
<label id="DescItemLabel" for="DescItem">Description:</label>
#Html.TextBox("DescItem", null, new { #class = "textStyle" })
</div>
<div class="itemGroup">
<input id="submitAddItem" type="submit" value="#Resource.ButtonTitleAddItem" />
</div>
}
</div>
</div> <!--end group -->
<div class="group">
<h3>Filters</h3>
<div>
#using (Ajax.BeginForm("Search", "Items",
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "jqGridItems",
OnSuccess = "showGridItems()"
}))
{
<!-- Drop down list of item types -->
<div id = "itemTypeFilter">
#Html.LabelFor(m => m.ItemViewModel.SelectedItemTypeId, new { id = "itemFilterLabel" })
#Html.DropDownListFor(m => m.ItemViewModel.SelectedItemTypeId,
Model.ItemViewModel.TypeItems)
</div>
<!-- Apply filter button for items -->
<div id="ApplyFilterItems" >
<input type="submit" name="_search" value="#Resource.CaptionItemsApplyFilter" />
</div>
}
</div>
</div> <!-- end group -->
</div> <!-- end accordion -->
<!--
<div id="jqGridItems">
#Html.Partial("../Grids/_ItemsGrid")
</div>
-->
</div> <!-- end second tab -->
</div> <!-- End tabs -->
SCRIPTS:
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.9.1.js")"></script>
<script type="text/javascript">
// -------------------------------------------------------------------------------------------------
// Slider functionality
// -------------------------------------------------------------------------------------------------
$(function () {
$("#slider-range-max").slider({
range: "max",
min: 1,
max: 255,
value: 1,
slide: function (event, ui) {
$("#amount").val(ui.value);
}
});
$("#amount").val($("#slider-range-max").slider("value"));
});
function showTabs() {
$("#tabs").tabs ();
};
$(document).ready(function () {
showTabs();
});
// Below makes tabs sortable (Their position can be altered)
$(function () {
var tabs = $("#tabs").tabs();
tabs.find(".ui-tabs-nav").sortable({
axis: "x",
stop: function () {
tabs.tabs("refresh");
}
});
});
$(function () {
function subscribe_accordion_to_hoverintent_event(accordionId) {
$(accordionId).accordion({
header: "> div > h3",
event: "click hoverintent"
});
}
subscribe_accordion_to_hoverintent_event("#accordion");
subscribe_accordion_to_hoverintent_event("#accordion2");
});
// Collapse content
$(function () {
function set_accordion_as_collapsible(accordionId) {
$(accordionId).accordion({
collapsible: true//,
//eightStyle: "auto"
});
}
set_accordion_as_collapsible("#accordion");
set_accordion_as_collapsible("#accordion2");
});
// Sortable functionality
$(function () {
function set_accordion_as_sortable(accordionId) {
$(accordionId).sortable({
axis: "y",
handle: "h3",
stop: function (event, ui) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children("h3").triggerHandler("focusout");
}
});
}
set_accordion_as_sortable("#accordion");
set_accordion_as_sortable("#accordion2");
});
/*
* hoverIntent | Copyright 2011 Brian Cherne
* http://cherne.net/brian/resources/jquery.hoverIntent.html
* modified by the jQuery UI team
*/
$.event.special.hoverintent = {
setup: function () {
$(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
},
teardown: function () {
$(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
},
handler: function (event) {
var currentX, currentY, timeout,
args = arguments,
target = $(event.target),
previousX = event.pageX,
previousY = event.pageY;
function track(event) {
currentX = event.pageX;
currentY = event.pageY;
};
function clear() {
target
.unbind("mousemove", track)
.unbind("mouseout", clear);
clearTimeout(timeout);
}
function handler() {
var prop,
orig = event;
if ((Math.abs(previousX - currentX) +
Math.abs(previousY - currentY)) < 7) {
clear();
event = $.Event("hoverintent");
for (prop in orig) {
if (!(prop in event)) {
event[prop] = orig[prop];
}
}
// Prevent accessing the original event since the new event
// is fired asynchronously and the old event is no longer
// usable (#6028)
delete event.originalEvent;
target.trigger(event);
} else {
previousX = currentX;
previousY = currentY;
timeout = setTimeout(handler, 100);
}
}
timeout = setTimeout(handler, 100);
target.bind({
mousemove: track,
mouseout: clear
});
}
};
</script>
CSS:
.elementStatus
{
visibility: hidden;
}
.image{
/*float: left;
margin-top: 2px;
padding-top: 1px;
padding-left: 10px;
width: 35px;*/
margin-top: 5px;
text-align: center;
vertical-align: middle;
}
.text{
/*float: left;
margin-top: 1px;
padding-left: 14px;
padding-bottom: 2px;
width: 35%;*/
font-weight: bold;
font-size: 1em;
text-align: center;
vertical-align: middle;
margin-bottom: 2px;
}
#accordion2 .ui-accordion-content
{
max-height: 400px;
overflow-y: auto;
}
#accordion, #accordion2
{
width: 790px;
padding-top: 10px;
margin-top: 10px;
margin-left: 0px;
margin-right: 0px;
}
#ComponentTypeFilterLabel
{
font-size: 1em;
margin-top: 11px;
float: left;
}
#componentTypeFilter, #itemTypeFilter
{
margin-top: 10px;
margin-left: 12px;
float: left;
}
#ApplyFilterComponents, #ApplyFilterItems
{
padding-left: 20px;
float: left;
}
#ApplyFilterComponents input, #ApplyFilterItems input
{
margin-top: 22px;
font-size: 1em;
}
#NumberOfItems
{
text-align: left;
width: 150px;
float: left;
margin-right: 1px;
padding-top: 5px;
font-size: 1em;
}
#amount
{
text-align: left;
color: #f6931f;
font-weight: bold;
border-top-color: currentColor;
border-right-color: currentColor;
border-bottom-color: currentColor;
border-left-color: currentColor;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin-top: 0px;
margin-left: 1px;
width: 555px;
padding-top: 5px;
padding-left: 5px;
padding-right: 1px;
margin-right: 1px;
}
#componentFilterLabel, #itemFilterLabel
{
font-size: 1em;
}
#componentId, #itemId
{
height: 55px;
font-size: 1em;
float: left;
text-align: left;
font-weight: 600;
}
#componentIdLabel, #itemIdLabel
{
margin-bottom: 5px;
height: 21px;
margin-top: 25px;/*0px; */
padding-bottom: 0px;
font-size: 1em;
}
#NameCompLabel, #NameItemLabel
{
margin-left: 0px;
margin-top: 25px;
padding-left: 14px;
font-size: 1em;
}
#DescCompLabel, #DescItemLabel
{
margin-left: 5px;
margin-top: 25px;
padding-left: 10px;
font-size: 1em;
}
#NameComp, #NameItem
{
float: left;
margin-left: 15px;
margin-top: 0px;
font-size: 1em;
}
#DescComp, #DescItem
{
float: left;
margin-top: 0px;
margin-left: 15px;
font-size: 1em;
}
#submitAddComp, #submitAddItem
{
margin-top: 40px;
margin-left: 15px;
font-size: 1em;
}
.componentGroup, .itemGroup
{
float: left;
}
.textStyle
{
width : 150px;
}
this cause to make visible vertical scroll bars in each panel that I do not want that.
so If I uncheck those attributes from ie dev tools (debugger) then all panels will be set to the height of the tallest panel that is what i want. So how to set it in the divs? with inline style or css?
ALMOST WORKING:
I have upated my script, now it is almost working. What I have done is to modify the code inside $(document).ready(...), see below:
$(document).ready(function () {
var tabs = $("#tabs").tabs({
activate: function (event, ui) {
$("#accordion2").accordion({
activate: function (event, ui) {
$(ui.newPanel).css('height', '100');
$(ui.newPanel).css('min-height', '100');
$(ui.newPanel).css('max-height', '400');
}
}); // End Accordion
} // End Activate tab
}); // End tabs
tabs.find(".ui-tabs-nav").sortable({
axis: "x",
stop: function () {
tabs.tabs("refresh");
}
});
});
The rest of code is kept the same as posted here above.
The problem now is the following: Initially first tab is active, and so first accordion shown with its first panel activated and expanded. Then when I switch to second tab, ONLY THE FIRST TIME, second accordion (accordion2) is show and its first panel activated, but the panel is not adjusting to its content: it is showing vertical scroll bar and i do not want that. Then If i switch to first tab and then again to second tab, then it works, accordion2 is activated and its first panel activated and shown, no vertical scroll bar is appearing and panel it is adjusting perfectly to its content. The problem is the first time i am switching from first tab to second tab where accordion2 is. So how to force panel for accordion2 to be adjusted to its content?
FINAL SOLUTION
$(document).ready(function () {
$("#accordion2").accordion({
header: "> div > h3",
event: "click hoverintent",
collapsible: true
});
var tabs = $("#tabs").tabs();
});
and in css file:
#accordion2 .ui-accordion-content
{
height: 100px;
max-height: 400px;
}
Please, do not downvote!
$("#DivName" ).accordion({
heightStyle: "content"
});
This is certainly what you and me are looking for. HeightStyle set to 'content' solved my issue.
The reason for height being set to 0 is because the other tabs are hidden and height gets calculated dynamically when accordion plugin is constructed. one way to solve the issue is use the tab activate event and construct the accordion only when the tab is active to the hight is set correctly. [JSFiddle]http://jsfiddle.net/8tBtR/
$(function(){
$( "#tabs" ).tabs({
activate: function( event, ui ) {
if((ui.newPanel.attr('id') === 'tabs-2') && (checkIfNotAccordion) )
{
$('#accordion2').accordion();
}
}
});
});
Seems like I can choose only 2. :)
Here's where I'm at. I can sort the droppable divs and I can drag the ui-draggable, but I cannot drop ui-draggable into the ui-widget-header divs. :/
HTML:
<div class="large-9 small-9 columns">
<div id="paginationPageDisplay" class="dropme paginationContainer ui-sortable">
<div class="droppable ui-widget-header">
<div class="droppable ui-widget-header">
</div>
</div>
<div class="large-3 small-3 columns">
<div id="paginationAdDisplay" class="paginationContainer">
<div class="adThing ui-draggable">1/4</div>
<div class="adThing ui-draggable">1/2</div>
<div class="adThing ui-draggable">Full Page</div>
</div>
</div>
CSS:
.paginationContainer {
height: 1500px;
margin-right: 1px;
border: 1px solid #CCCCCC;
}
.adThing {
display: inline-block;
width: auto;
height: auto;
padding: 8px 15px;
border: 1px solid #ccc;
text-align: center;
background: #eee;
}
.dropme {
display: inline-block;
width: auto;
height: auto;
overflow: hidden;
margin-top: 20px;
}
.droppable {
height: 120px;
width: 90px;
padding: 2px;
margin: 10px 3px;
background: #F9F9F9;
border: 1px solid #CCCCCC;
float: right;
}
JS:
$('.adThing').draggable({
cursor: 'pointer',
connectWith: '.dropme',
helper: 'clone',
opacity: 0.5,
zIndex: 10
});
$('.dropme').sortable({
connectWith: '.dropme',
cursor: 'pointer'
});
$('.droppable').droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$("#paginationLoadButton").click(function() {
var pageCount, i, $pageDisplay = $("#paginationPageDisplay"), pageWidget;
$pageDisplay.html('');
pageCount = $("#paginationPageCount").val();
for (i=1; i<=pageCount; i++) {
pageWidget = '<div class="droppable ui-widget-header">' + i + '<p></p></div>';
$pageDisplay.html($pageDisplay.html() + pageWidget);
}
});
The problem was that I was binding droppable on document ready but those elements are generated by the button click. I moved the droppable bind into the button click event and it's resolved.
$("#paginationLoadButton").click(function() {
var pageCount, i, $pageDisplay = $("#paginationPageDisplay"), pageWidget;
$pageDisplay.html('');
pageCount = $("#paginationPageCount").val();
for (i=1; i<=pageCount; i++) {
pageWidget = '<div class="droppable ui-widget-header">' + i + '<p></p></div>';
$pageDisplay.html($pageDisplay.html() + pageWidget);
}
$('.droppable').droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
I'm using jQuery Mobile to build up a mobile website.
On one page I have a bunch of texts to display in a div.
I coded according to the simple example of iScroll 4.
I get it right in my Chrome Browser, but when I test it in mobile safari, I can swipe down the text a bit but it will bounce back, rather than scroll down.
Here's the HTML Markup:
<div data-role="content">
<div class="text-content-wrapper">
<div id="scroll-wrapper">
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>
and the CSS is:
.text-content-wrapper {
width: 80%;
height: 240px;
position: absolute;
left: 35px;
top: 65px;
overflow: auto;
padding: 10px 0;
background-color: white;
opacity: 0.8;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index: 1;
}
#scroll-wrapper ul{
position: absolute;
z-index: 1;
width: 100%;
list-style: none;
text-align: left;
height: 360px;
}
If I move the position: absolute to #scroll-wrapper, it won't even work in the chrome.
And use the iScroll:
var myScroll1;
function loaded() {
myScroll1 = new iScroll('scroll-wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);