I've just started some days ago working with JQuery UI to allow some drag and drop and sorting on my homepage. In the code shown below, i wanted to add "+" and "-" to correct the equation "1_2_3=6", so the "+" has to been dropped two times to make the equation correct.
At the moment, it nearly works perfect. I can add as many "+" and "-" as I want, I can sort them into the equation. The only problem is, that I cannot remove any "+" or "-".
Can you give me any hint, how to be able to remove the signs by moving them out of the sortable window?
Thanks for your help!
<html>
<head>
<style>
#draggable { list-style-type: none; margin: 0; padding: 0; }
#draggable li { display: inline-block; margin: 1%; padding: 1%; font-size: 10vw; text-align:center; min-width:20px; border-style: solid; border-width: medium; border-color:black; background-color:grey;}
#sortable { float:left; list-style-type: none; width:100%; }
#sortable li { display: inline-block; margin: 0; padding: 0; font-size: 10vw; text-align:center; min-width:20px;}
</style>
<script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$( function() {
$( ".clone").draggable({
cursor:"move",
revert: "invalid",
connectToSortable: '#sortable',
helper: 'clone'
});
$( "#sortable").sortable({
connectWith: "ul",
cancel: ".ui-state-disabled",
});
} );
</script>
</head>
<body>
<ul id="draggable">
<li class="clone">+</li>
<li class="clone">-</li>
</ul>
<ul id="sortable">
<li class="ui-state-disabled">1</li>
<li class="ui-state-disabled">2</li>
<li class="ui-state-disabled">3=6</li>
</ul>
</body>
</html>
You can create a div when the UI components are dropped into the div you can remove the dropped component.
Sample code.
//HTML
<div class="removeDiv">
<p>Drop to remove</p>
</div>
//Style
.removeDiv{
width:100px;
height:100px;
background-color:red;
margin-top:150px;
}
//Script
$('.removeDiv').droppable({
over: function(event, ui) {
ui.draggable.remove();
}
});
This should get your work done.
Here's a fiddle for the above code. JS Fiddle
Expanding on my comment. Your code may look something like this.
$(function() {
$(".clone").draggable({
cursor: "move",
revert: "invalid",
connectToSortable: '#sortable',
helper: 'clone'
});
$("#sortable").sortable({
connectWith: "ul",
cancel: ".ui-state-disabled",
});
$(".trash").droppable({
accept: "#sortable > li",
classes: {
"ui-droppable-hover": "ui-state-highlight"
},
drop: function(event, ui) {
deleteItem(ui.draggable);
}
});
function deleteItem($o) {
$o.fadeOut().remove();
}
});
#draggable {
list-style-type: none;
margin: 0;
padding: 0;
}
#draggable li {
display: inline-block;
margin: 1%;
padding: 1%;
font-size: 10vw;
text-align: center;
min-width: 20px;
border-style: solid;
border-width: medium;
border-color: black;
background-color: grey;
}
#sortable {
list-style-type: none;
width: 100%;
}
#sortable li {
display: inline-block;
margin: 0;
padding: 0;
font-size: 10vw;
text-align: center;
min-width: 20px;
}
.trash {
width: 50px;
height: 50px;
border: 1px solid #000;
border-radius: 6px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="drag-items" style="display: block;">
<ul id="draggable">
<li class="clone">+</li>
<li class="clone">-</li>
</ul>
</div>
<div class="problem" style="display: block;">
<ul id="sortable">
<li class="ui-state-disabled">1</li>
<li class="ui-state-disabled">2</li>
<li class="ui-state-disabled">3=6</li>
</ul>
</div>
<div class="trash">
<span class="ui-icon ui-icon-trash"></span>
</div>
In this code, add a small section for items to be dragged to and when they are dropped, they are removed. Also has visual feedback.
Related
I am making a sortable grocery list, but I cannot figure out the best way to remove an item from the sorted list and have it go back to the original category.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
#sortable {border: 1px solid #000; min-height:100px;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable({
connectWith: '.connectedList'
});
$( ".draggable" ).draggable({
connectToSortable: "#sortable",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
} );
</script>
</head>
<body>
<h3>Fruit</h3>
<ul id="FruitCollection" class="fruits connectedList">
<li class="draggable">Apples</li>
<li class="draggable">Oranges</li>
</ul>
<h3>Meat</h3>
<ul id="MeatCollection" class="meats connectedList">
<li class="draggable">Beef</li>
<li class="draggable">Chicken</li>
<li class="draggable">Pork</li>
</ul>
<h3>Dairy</h3>
<ul id="DairyCollection" class="dairy connectedList">
<li class="draggable">Cheese</li>
<li class="draggable">Milk</li>
<li class="draggable">Sour Cream</li>
<li class="draggable">Yogurt</li>
</ul>
<h2>Grocery List</h2>
<ul id="sortable">
</ul>
</body>
</html>
I am not sure how connectWith really works. It seems like this is an already solved problem using a combination of draggable, droppable, or sortable. Each category's items should only return back to it if removed from the sortable.
For example, drag cheese into the grocery list, but then remove it by dragging it out of the bordered, sortable. Cheese should go back to the Dairy list.
It might be easier to add a Delete type of icon that the User can click. Example:
$(function() {
function returnToList(item) {
var t = $("." + $(item).data("list"));
$(item)
.detach()
.appendTo(t);
$(".ui-icon", item).remove();
}
function addDel(item) {
$("<span>", {
class: "ui-icon ui-icon-close"
}).appendTo(item);
}
$("#sortable").sortable({
stop: function(e, ui) {
if ($(".ui-icon", ui.item).length < 1) {
addDel(ui.item);
}
}
});
$(".items li").draggable({
connectToSortable: "#sortable",
revert: "invalid"
});
$("ul, li").disableSelection();
$(".list").on("click", "li .ui-icon-close", function() {
returnToList($(this).parent());
});
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
li {
margin: 5px;
padding: 5px;
width: 150px;
position: relative;
}
.items {
width: 175px;
display: inline-block;
float: left;
}
.grocery {
width: 200px;
display: inline-block;
margin-left: 20px;
}
#sortable {
border: 1px solid #000;
min-height: 100px;
}
.list li span {
position: absolute;
right: 4px;
padding: 2px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
<div class="items list">
<div class="ui-widget-header">Fruit</div>
<ul id="FruitCollection" class="fruits">
<li class="ui-widget-content" data-list="fruits">Apples</li>
<li class="ui-widget-content" data-list="fruits">Oranges</li>
</ul>
<div class="ui-widget-header">Meat</div>
<ul id="MeatCollection" class="meats">
<li class="ui-widget-content" data-list="meats">Beef</li>
<li class="ui-widget-content" data-list="meats">Chicken</li>
<li class="ui-widget-content" data-list="meats">Pork</li>
</ul>
<div class="ui-widget-header">Dairy</div>
<ul id="DairyCollection" class="dairy">
<li class="ui-widget-content" data-list="dairy">Cheese</li>
<li class="ui-widget-content" data-list="dairy">Milk</li>
<li class="ui-widget-content" data-list="dairy">Sour Cream</li>
<li class="ui-widget-content" data-list="dairy">Yogurt</li>
</ul>
</div>
<div class="grocery list">
<div class="ui-widget-header">Grocery List</div>
<ul id="sortable"></ul>
</div>
<div class="ui-helper-clearfix"></div>
</div>
You can make use of a Drag event, but you need a target. The event callback would then perform the same as the Click.
I'm using a template found https://bootstrapious.com/p/bootstrap-sidebar (it's the 2nd sidebar option). I have it integrated into a stock MVC5 application and everything works except for whatever is in RenderBody(), it's not responsive to when the sidebar is toggled open/closed. It is responsive when I resize the page, and the sidebar responds appropriately too, but I don't want the sidebar to overlay the contents on RenderBody(). How would I go about fixing that? Thank you in advanced!
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
About
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<!--
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>-->
</div>
</nav>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
</html>
Site.css
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 999;
background: #367fa9;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #3c8dbc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #367fa9;
background: #fff;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #3c8dbc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #3c8dbc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: calc(100% - 250px);
padding: 40px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
#content.active {
width: 100%;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
}
#content.active {
width: calc(100% - 250px);
}
#sidebarCollapse span {
display: none;
}
}
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've learned how to create a jquery ui tab, thanks to http://jqueryui.com/tabs, and customized the look of it. I've been searching the web on how to highlight a selected tab by changing it's background color when someone clicks on it. So far, it's been frustrated and unsuccessful.
Here's the HTML Code Use:
<!DOCTYPE html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<title>Jquery Tab Test</title>
</head>
<body>
<div id="tab-wrapper">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<br class="clearboth" />
<div id="tabs1" class="tab-content">
Content 1
</div>
<div id="tabs2" class="tab-content">
Content 2
</div>
<div id="tabs3" class="tab-content tabs3">
Content 3
</div>
</div>
</div>
</body>
and CSS:
body, html {
height: 101%;
}
body {
font-family: arial;
}
.clearboth {
clear: both;
padding: 0;
margin: 0;
}
#tab-wrapper {
background-color: #f00fff;
border: solid 1px #909090;
padding: 5px;
width: 330px;
}
#tabs {
overflow: hidden;
}
#tabs ul li,
#tabs ul {
margin: 0;
padding: 0;
list-style: none;
}
#tabs ul a {
float: left;
padding: 5px;
display: block;
width: 100px;
text-align: center;
text-decoration: none;
color: #000000;
height: 20px;
line-height: 20px;
font-size: 10pt;
font-weight: bold;
background-color: #cccccc;
}
#tabs ul a:hover {
background-color: #f1f1f1;
}
#tabs .tab-content {
padding: 5px;
display: block;
background-color: #f1f1f1;
font-size: 10pt;
height: 300px;
border-top: solid 1px #000000;
}
Please help if anyone can.
Jquery assigns the selected tab the class="ui-tabs-active" so to style it simply hook your css into it as follows:
#tabs .ui-tabs-active {
background: yellow;
}
This works for me:
#tabs .ui-tabs-active {
background: yellow;
}
but the above answer did not - the order in the css file is important - the above is after hover.
I've got a autocomplete input on a form but the drop down list is not being styled correctly, it appears like a normal bulleted list of hyperlinks.
This is the rendered hidden list that the autocomplete creates:
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: none; top: 253px; left: 20px; width: 162px;">
<li class="ui-menu-item" role="presentation">
<a id="ui-id-10" class="ui-corner-all" tabindex="-1">Austria</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-11" class="ui-corner-all" tabindex="-1">Australia</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-12" class="ui-corner-all" tabindex="-1">Aust-Timor</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-13" class="ui-corner-all" tabindex="-1">Austur-Kongo</a>
</li>
</ul>
So it looks like its got all the right style classes but if I look at the CSS in Chrome some of the classes are not be applied - namely ui-menu
element.style {
display: none;
top: 253px;
left: 20px;
width: 162px;
}
Matched CSS Rules
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
border-bottom-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-top-left-radius: 4px/*{cornerRadius}*/;
}
.ui-widget-content {
border: 1px solid #aaaaaa/*{borderColorContent}*/;
background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
color: #222222/*{fcContent}*/;
}
.ui-widget {
font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
font-size: 1.1em/*{fsDefault}*/;
}
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
}
.ui-front {
z-index: 100;
}
user agent stylesheetul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
Inherited from body
body {
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
How can I find out why some style classes are not being applied?
Have you included the JQuery UI javascript, and then setup the AutoComplete functionality?
On my site, the following jQuery javascript needs to be added to the bottom of the page where the autocomplete field is placed:
$(document).ready(function () {
$(":input[data-autocomplete]").each(function() {
$(this).autocomplete({ source: $(this).attr("data-autocomplete") });
});
});
Also ensure this code is executed after the load of the JQuery and JQuery UI JS files.
Nick