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.
Related
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.
I've checked the code over meticulously but I cant find anything wrong with it.
I modeled it after the menu here but that's not really working out for me. Basically, all that comes up is ur run of the mill ul.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<script type ="text/javascript">
<!-- Dropdown menu -->
<script>
$( function() {
$( "#dropMenu" ).menu();
} );
</script>
<style>
.ui-menu { width: 150px; }
body{
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
}
h1{
font-family:"Lucida Calligraphy","Lucida Fax", Arial;
color: Beige;
text-align:center;
}
#footer{
position: absolute;
bottom: 0;
background-color: rgba(20,90,50,.8);
margin-bottom: 0px;
padding-bottom: 0px;
border-radius:10%;
text-align:center;
color:beige;
margin-bottom: 0px;
}
#square{
height:200px;
width: 350px;
background-color:rgba(20, 90,50);
}
#wrapper{
background-color: rgba(20, 90,50, .5);
margin: auto;
border-radius:6%;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Serenity Landscaping <br /> and Property Management</h1>
<!-- <div id="square"></div> -->
<ul id="menu">
<li><div>Menu</div>
<ul>
<li><div>Home</div></li>
<li><div>Side Biz</div></li>
<li><div>Portfolio</div></li>
<li><div>Contact Us</div></li>
</ul>
</li>
</ul>
<div id="footer"><p>SLPM is owner operated and is dedicated to providing the highest quality service to all customers.
<br/>Services in the landscape and property maintenance field</p></div>
</div>
<script type ="text/javascript">
var windowWidth=$(window).width();
var wrapperWidth=(windowWidth/2);
var windowHeight=$(window).height();
var wrapperHeight=windowHeight;
$("#wrapper").height(wrapperHeight+"px");
$("#wrapper").width(wrapperWidth+"px");
<!-- footer width resizing -->
var footerWidth;
footerWidth = $("#footer").css("width", wrapperWidth);
<!-- footer width resizing -->
<!--alert(wrapperWidth);-->
<!--alert(windowWidth);-->
</script>
</body>
</html>
The first issue I have seen is you are using wrong id for initializing your menu.
I have created a fiddle for your code and did some minor change and it is working fine.
There were only silly mistakes.
Here is working fiddle.
Working Fiffle
Working straight from the jqueryUI example, using foundation4 (only including jquery in the head). Has any one else had this problem? My lists are not drag-drop-sortable.
in the head
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable1, #sortable2, #sortable3 { margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
#sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( "ul" ).sortable({
connectWith: "ul"
dropOnEmpty: false
});
$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
});
</script>
in the body (using django...sorry for the funky template tags)
<div class="large-4 columns">
<ul id="sortable1">
<li>Nathan</li>
<li>Bob</li>
<li>Joe</li>
</ul>
</div>
<div class="large-4 columns">
<ul id="sortable2">
</ul>
</div>
<div class="large-4 columns">
<ul id="sortable3">
</ul>
</div>
<!-- <script src="{% static "js/vendor/jquery.js" %}"></script> -->
<script src="{% static "js/foundation.min.js" %}"></script>
<script>
$(document).foundation();
</script>
The order I included everything was wrong.
The body should look like this...
<script src="{% static "js/vendor/jquery.js" %}"></script>
<script src="{% static "js/foundation.min.js" %}"></script>
<script>
$(document).foundation();
</script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$( "ul" ).sortable({
connectWith: "ul"
dropOnEmpty: false
});
$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
</script>
I want to create draggable and sortable effect like that of http://www.bbc.co.uk/.
For that I used Jquery UI and got kinda same effect.
But with complications, if you see the effect in BBC's website, when you pick a division there appears a shadow with a dotted line below it and the shifting between the boxes is pretty much different that I get.
When using the Jquery UI, I floated the <li> to appear them on side by side to each other, but when I am shifting the boxes, the shifting box gets inserted in between the boxes.
Here is my coding so far. But it is not that of BBC
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<script src="js/lib/jquery.js"></script>
<script src="js/lib/ui.js"></script>
<script src="js/lib/widget.js"></script>
<script src="js/lib/utilities/mouse.js"></script>
<script src="js/lib/interactions/draggable.js"></script>
<script src="js/lib/interactions/sortable.js"></script>
<style>
* { margin:0;padding:0; }
body {
background:url(themes/default/images/background.gif);
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
#wrapper {
width:980px;
margin: 0 auto;
border:1px #F00 solid;
}
.sublayout {
width:300px;
height:300px;
background:#aeadad;
border:1px #2495f5 solid;
float:left;
margin:1em;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
}
</style>
<script type="text/javascript">
$(function() {
$("#sortable").sortable({
revert: true
});
$("#draggable").draggable({
connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid'
});
$("ul, li").disableSelection();
});
</script>
</head>
<body>
<div id="wrapper">
<ul id="sortable">
<li class="ui-state-default sublayout">Item 1</li>
<li class="ui-state-default sublayout">Item 2</li>
<li class="ui-state-default sublayout">Item 3</li>
<li class="ui-state-default sublayout">Item 4</li>
<li class="ui-state-default sublayout">Item 5</li>
</ul>
</div>
</body>
</html>
I think you need 3 lists (columns) to created this kind of effect.
Have a look at this demo: http://jqueryui.com/demos/sortable/#portlets
I'm using the default for jQueryUI, but it looks like the font is a little big.
I know that one solution would be "WELL! JUST MAKE IT SMALLER!", but I'm just wondering if I've messed something up or I don't have a value set correctly before I charge in and start changing things.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript">
google.load("jqueryui", "1");
function OnLoadCallbackUI(){
$('#tabs').tabs();
}
google.setOnLoadCallback(OnLoadCallbackUI);
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div id="tabs-1">
tabs-1
</div>
<div id="tabs-2">
tabs-2
</div>
</div>
</body>
</html>
Don't modify the jQuery CSS file. Instead, use your own CSS to override it as needed.
The demo page includes:
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}