$('.wrapca, .wrapcb').sortable({
containment: "parent",
connectWith: ".wrapca, .wrapcb",
axis: "x",
tolerance: "pointer"
});
.wrapca, .wrapcb{
width:30%;
display:inline-grid;
grid-template-columns:repeat(2, 1fr);
grid-gap:5px;
}
.inside{
cursor:cell;
background:gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style="text-align:justify; text-align-last:justify;">
<div class='wrap wrapca'>
<div class='inside'>lorem</div>
<div class='inside'>ipsum</div>
</div>
<div class='wrap wrapcb'>
<div class='inside'>lorem</div>
<div class='inside'>ipsum</div>
</div>
</div>
Why connectWith doesn't work here?
A selector of other sortable elements that the items from this list should be connected to. This is a one-way relationship, if you want the items to be connected in both directions, the connectWith option must be set on both sortable elements.
$(function() {
$('.wrap').sortable({
containment: $(".wrap").parent(),
connectWith: ".wrap",
//axis: "x",
tolerance: "pointer"
});
});
.wrapca,
.wrapcb {
width: 30%;
display: inline-grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px;
}
.inside {
cursor: cell;
background: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style="text-align:justify; text-align-last:justify;">
<div class='wrap wrapca'>
<div class='inside'>lorem</div>
<div class='inside'>ipsum</div>
</div>
<div class='wrap wrapcb'>
<div class='inside'>lorem</div>
<div class='inside'>ipsum</div>
</div>
</div>
I suspect you were being too aggressive in your code. Also, the containment was too strict.
Related
we are creating a table structure using html div, inside that we need to drag and drag and drop the columns and rows , but the row head should be fixed. ie, Drag and drop Div columns and Div rows without moving row head
anybody knows how to solve this.
I need to create this using JQuery , html and css.
$(function() {
$("#tblcols").sortable({
items: '.rtab:not(.rtab:first-child)',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function(e, ui) {
ui.item.addClass("selected");
},
stop: function(e, ui) {
ui.item.removeClass("selected");
$(this).find(".rtab").each(function(index) {
if (index > 0) {
$(this).find(".ctab").eq(2).html(index);
}
});
}
});
});
.Table {
display: table;
}
.Title {
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading {
display: table-row;
font-weight: bold;
text-align: center;
}
.rtab {
display: table-row;
}
.ctab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
.htab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div class="Table">
<div class="Title">
<p>Drag table rows and columns</p>
</div>
<div class="Heading">
<div class="htab">
<p>Sl</p>
</div>
<div class="htab">
<p>Name</p>
</div>
<div class="htab">
<p>Designation</p>
</div>
<div class="htab">
<p>Salary</p>
</div>
<div class="htab">
<p>Location</p>
</div>
</div>
<div class="rtab" id="tblcols">
<div class="ctab">
<p>1</p>
</div>
<div class="ctab">
<p>Athira</p>
</div>
<div class="ctab">
<p>Developer</p>
</div>
<div class="ctab">
<p>6l</p>
</div>
<div class="ctab">
<p>Kottayam</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>2</p>
</div>
<div class="ctab">
<p>Timy</p>
</div>
<div class="ctab">
<p>Designer</p>
</div>
<div class="ctab">
<p>5l</p>
</div>
<div class="ctab">
<p>wayanad</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>3</p>
</div>
<div class="ctab">
<p>Liya</p>
</div>
<div class="ctab">
<p>Team Lead</p>
</div>
<div class="ctab">
<p>7l</p>
</div>
<div class="ctab">
<p>Kollam</p>
</div>
</div>
</div>
I'm a little unsure what you mean. I hope I captured the main idea, that you want the first cell in each row to remain in order after items are sorted. Here is an example that might work for you.
$(function() {
$(".Table .Heading").sortable({
items: '> .htab:not(:eq(0))',
cursor: 'pointer',
axis: 'x',
dropOnEmpty: false,
placeholder: "htab placeholder",
start: function(e, ui) {
var ind = ui.item.index();
$(".Table .rtab").each(function() {
$(".ctab", this).eq(ind).css("opacity", "0.25");
});
ui.item.data("orig-index", ind);
},
stop: function() {
$(".Table .rtab .ctab").css("opacity", "");
},
update: function(e, ui) {
var oInd = ui.item.data("orig-index");
var cInd = ui.item.index();
var cols = $(".Table .htab").length;
$(".Table .rtab").each(function() {
var cell = $(".ctab", this).eq(oInd).detach();
if (cInd < (cols - 1)) {
// Mid Col
cell.insertBefore($(".ctab", this).eq(cInd));
} else {
// Last Col
$(this).append(cell);
}
})
}
});
$(".Table").sortable({
items: '> .rtab',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function(e, ui) {
$(".ctab", ui.item).eq(0).html(" ");
},
stop: function(e, ui) {
$(".Table .rtab").each(function(ind, el) {
$(".ctab", el).eq(0).html((ind + 1));
});
}
});
});
.Table {
display: table;
}
.Title {
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading {
display: table-row;
font-weight: bold;
text-align: center;
}
.rtab {
display: table-row;
}
.ctab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
.htab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
.htab.placeholder {
background: #ccc;
width: 20px;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Table">
<div class="Title">
<p>Drag table rows and columns</p>
</div>
<div class="Heading">
<div class="htab">
<p>Sl</p>
</div>
<div class="htab">
<p>Name</p>
</div>
<div class="htab">
<p>Designation</p>
</div>
<div class="htab">
<p>Salary</p>
</div>
<div class="htab">
<p>Location</p>
</div>
</div>
<div class="rtab" id="tblcols">
<div class="ctab">
<p>1</p>
</div>
<div class="ctab">
<p>Athira</p>
</div>
<div class="ctab">
<p>Developer</p>
</div>
<div class="ctab">
<p>6l</p>
</div>
<div class="ctab">
<p>Kottayam</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>2</p>
</div>
<div class="ctab">
<p>Timy</p>
</div>
<div class="ctab">
<p>Designer</p>
</div>
<div class="ctab">
<p>5l</p>
</div>
<div class="ctab">
<p>wayanad</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>3</p>
</div>
<div class="ctab">
<p>Liya</p>
</div>
<div class="ctab">
<p>Team Lead</p>
</div>
<div class="ctab">
<p>7l</p>
</div>
<div class="ctab">
<p>Kollam</p>
</div>
</div>
</div>
For the Header, we can sort the header items and then move the cells that correspond with it. Due to the relationship of the elements in Rows, there is not an element that contains all the column items. It effectively does what is needed, yet looks a little weird in doing it. With items we can exclude the first header.
When using Sortable for the Rows, you want to target the parent and then using items option, you can target the rows that you want to sort and those you want to exclude. Since we're sorting the rows and not the items inside, there is not a good way to exclude an item in the row.
When Sort starts, cell 0 is change to so it does not shrink too much. Once sort is stopped, it re-indexes the rows back into order. If we use update it will only fire when a change is performed. So if the user grabs a row and doesn't move it, there is not update. To address this, we can use stop to re-index.
Hope that helps.
Why is title jumping to the left while dragging it up and down and how to prevent this?
I tried this solution - doesn't work for me.
$(".act").sortable({
containment: "parent",
axis: "y",
helper: "clone",
tolerance: "pointer"
});
.parent{
position:fixed;
left:5px;
top:9px;
width:50%;
display:grid;
grid-template-columns:1fr 1fr;
overflow:hidden;
grid-gap:5px;
}
.parent div{
background:gold;
}
.title{
cursor:cell;
position:relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class='parent'>
<div></div>
<div class='act'>
<div class='title'>lorem</div>
<div class='title'>ipsum</div>
<div class='title'>dolor</div>
<div class='title'>sit</div>
</div>
</div>
I have a set of 2 very basic pages in jQuery Mobile:
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
Header 1
</div>
<div data-role="content">
Content 1
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<button>next</button>
</div>
</div>
<div data-role="page2" id="page">
<div data-role="header">
Header 2
</div>
<div data-role="content">
Content 2
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<button>next</button>
</div>
</div>
On buttonclick I do a page-transition to the other page:
$("#page1 button").on("click", function(){
$.mobile.changePage($("#page2"), {transition: "slide", reverse: false, changeHash: false});
});
$("#page2 button").on("click", function(){
$.mobile.changePage($("#page1"), {transition: "slide", reverse: false, changeHash: false});
});
But while the transition is running, the footer jumps out of position and moves almost out of the page at the bottom of the page.
How can I avoid that sideeffect?
Beside your typo here: <div data-role="page2" id="page"> which shall be <div data-role="page" id="page2">, i think your question is interesting, because i believe you would like to explore the features of the fixed external toolbars of JQM 1.4.5:
From JQM documentation here Fixed external toolbars:
External toolbars are outside of the page they are not effected by
transition
Here is a simple example of navigation with an external toolbar, with just one header, one footer and one navigation button where the navigation link and page title are set dynamically:
$(function(){
$("[data-role='header'], [data-role='footer']").toolbar({
theme: "a",
position: "fixed",
tapToggle: false
});
});
$(document).on('click', '#btn-next', function () {
var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
var pages = {"page2": "#page1", "page1": "#page2"};
$(":mobile-pagecontainer").pagecontainer("change", pages[pageId], {
transition: "slide",
reverse: false,
changeHash: false
});
});
$(document).on("pagecontainerchange", function() {
$("[data-role='header'] h2" ).text($(".ui-page-active").jqmData("title"));
});
.footer-button-left {
position: absolute !important;
margin: 0 !important;
top: auto !important;
bottom: 0.24em !important;
left: 0.4em !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="header">
<h2>Header</h2>
</div>
<div data-role="page" data-title="Header 1" id="page1">
<div data-role="content">
Content 1
</div>
</div>
<div data-role="page" data-title="Header 2" id="page2">
<div data-role="content">
Content 2
</div>
</div>
<div data-role="footer">
<h2>Footer</h2>
<button id="btn-next" class="ui-btn ui-corner-all ui-btn-inline ui-mini footer-button-left">next</button>
</div>
</body>
</html>
Please note, initial text in header & footer is required as placeholder, as well a bit of custom styling for the button inside the footer.
Iam having code with two dialogs one from another, while going back from second dialog to first i have given data-transition as slide but it is not working. Can someone help me please thanks.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale="1"">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
<style>
.ui-simpledialog-screen-modal{
opacity: 0.4;
}
.ui-simpledialog-container {
border: 1px solid rgb(221, 221, 221) !important;
}
.ui-grid-a > div {
padding: 2px;
}
</style>
<script>
$(document).on("pagecreate", "#page1", function () {
$(document).on('click', '#openPopup', function() {
$('#inlinecontent').simpledialog2({
mode: "blank",
headerText: "Select Item(s)",
headerClose: false,
blankContent: true,
themeDialog: 'a',
width: '75%',
zindex: 1000
});
});
$(document).on('click', '#dialogSubmit', function() {
var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
if (numChecked > 0){
$(document).trigger('simpledialog', {'method':'close'});
} else {
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Warning',
headerClose: true,
transition: 'flip',
themeDialog: 'b',
zindex: 2000,
blankContent :
"<div style='padding: 15px;'><p>Please select at least one checkbox first.</p>"+
// NOTE: the use of rel="close" causes this button to close the dialog.
"<a rel='close' data-role='button' href='#'>OK</a></div>"
});
}
});
});
</script>
</head>
<body>
<!-- the page markup -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
<h1>SimpleDialog2 Chained Popup</h1>
</div>
<div class="ui-content" role="main">
<!-- button that opens the popup -->
<button id="openPopup">Select One or More Item(s)...</button>
</div>
</div>
<!-- the popup markup -->
<div id="inlinecontent" style="display:none" >
<div style="padding: 15px;">
<fieldset id="cBoxes" data-role="controlgroup" >
<legend>Favorite Fruit:</legend>
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" />
<label for="checkbox-v-2a">Apple</label>
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" />
<label for="checkbox-v-2b">Banana</label>
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" />
<label for="checkbox-v-2c">Orange</label>
</fieldset>
<div class="ui-grid-a">
<div class="ui-block-a"><button id="dialogSubmit" data-theme="b">OK</button></div>
<div class="ui-block-b"><button id="dialogCancel" rel='close'>Cancel</button></div>
</div>
</div>
</div>
</body>
</html>
Let's say I have something set to be dragged:
<div class="container">
<div id="draggable-1"></div>
<div id="draggable-3"></div>
<div id="draggable-4"></div>
<div id="draggable-5"></div>
</div>
Is it possible to set jqueryui's draggable api so I can drag multiple draggable elements at the same time?
Thanks.
this is a guess but try
set no style sheet on container so it is set as a group. then do this
$(function() {
$(".container").draggable();
});
then when you drag the entire container drags as a group including all elements inside.
here is a working example of what i did.
<html>
<head>
<style type="text/css">
#draggable-1,#draggable-2,#draggable-3,#draggable-4,#draggable-5 {
width:100px;
height:100px;
background:red;
margin-bottom:10px;
}
.container {
}
</style>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript">
$(function() {
$(".container").draggable();
});
</script>
</head>
<body>
<div class="container">
<div id="draggable-1"></div>
<div id="draggable-3"></div>
<div id="draggable-4"></div>
<div id="draggable-5"></div>
</div>
</body>
</html>