When I click on the pop up link it turns blue but nothing popup. I would like to know what I am doing wrong. Do I need to refresh the navbar? I know that jquery mobile events need to be refreshed. Should I use the listview('refresh') ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Customer Chooses Beer Quantity</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script>
$(document).on('pagebeforeshow','#index', function(){
start_beer_quantity_from_0();
//hide the ui loader
$("#index").loader().loader("option", "disabled", true );
//ajax call to beers
function start_beer_quantity_from_0(){
//form variables
var beer_count = 0;
var formData = {beer_count:beer_count};
ajax_update_content_when_page_is_loaded_beer_quantity(formData);
}
function ajax_update_content_when_page_is_loaded_beer_quantity(formData){
$.ajax({
url : '<?php echo base_url()."index.php/drink_cart/customer_chooses_beer_quantity"; ?>',
async : true,
type : "POST",
cache : false,
data : formData,
dataType: "html",
success : function(data){
//alert($.trim(data));
$('.display_beer_count').html(data);
},
error: function (jqXHR, textStatus, errorThrown){
$('#server_message_error_jqXHR').html("here is the jqXHR"+jqXHR);
$('#server_message_error_textStatus').html("here is the textStatus "+textStatus);
$('#server_message_error_errorThrown').html("here is the errorThrown"+errorThrown);
}
});
return false;
}
});
$(document).on('click','.beers', function (event){
var beer_quantity = $(this).find(".beer_quantity").val();
var beer = $(this).find(".beer").val();
//form variables
var formData = {
beer_quantity:beer_quantity,beer:beer
};
submit_ajax_form_add_beer(formData);
event.preventDefault();
function submit_ajax_form_add_beer(formData){
$.ajax({
url : '<?php echo base_url()."index.php/drink_cart/customer_chooses_beer_quantity"; ?>',
async : true,
type : "POST",
cache : false,
data : formData,
dataType: "html",
success : function(data){
// alert("Beer posted");
$('.display_beer_count').html($.trim(data));
},
error: function (jqXHR, textStatus, errorThrown){
alert("There is not internet connection. Please check your internet connection");
$('#server_message_error_jqXHR').html("here is the jqXHR"+jqXHR);
$('#server_message_error_textStatus').html("here is the textStatus "+textStatus);
$('#server_message_error_errorThrown').html("here is the errorThrown"+errorThrown);
}
});
return false;
}
});
</script>
</head>
<body >
<div data-role="page" id="index" >
<div data-role="popup" id="settings_popup_beer_quantity" data-position="right">
<ul data-inset="true" data-role="listview" data-theme="a" data-divider-theme="b" style="min-width:210px;">
<li data-role="list-divider">Settings</li>
<li data-icon="false"><?php echo anchor('login/logout/','Logout', array('title'=>"Logout", "rel" =>"external"));?></li>
<li data-icon="false"><?php echo anchor('customer_settings/','Settings',array('title'=>"Settings","rel" =>"external"));?></li></ul></div>
<div style="float:left;">
<img class="small_logo" border="0" src="<?php echo $this->config->base_url();?>images/small_logo.png" alt="cup Bar Express" />
</div>
<div data-role="header" style="width:100px;float:right;" data-position="right">
<div class="settings_button_quantity" data-role="navbar">
<ul>
<li>Settings</li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<div role="main" class="ui-content" id="index">
<div class="background_image">
<div class="ui-grid-solo" id="title">QUANTITY</div>
<ul data-role="listview" data-split-theme="a" data-inset="true">
<?php
if(isset($beer_quantity_button)){
echo $beer_quantity_button;
}
?>
</ul>
</div>
</div>
<style type="text/css">
.ui-listview>li h1, .ui-listview>li h2, .ui-listview>li h3, .ui-listview>li h4, .ui-listview>li h5, .ui-listview>li h6{
font-family:'RNS Camelia';
text-shadow: none;
color : black !important;
font-weight: 700;
font-size : 33px;
}
li h1 .display_beer_count{
color:white;
}
.ui-listview>.ui-li-static, .ui-listview>.ui-li-divider, .ui-listview>li>a.ui-btn{
padding-right:18px;
padding-left :18px;
text-align :center;
background :transparent !important;
}
button.ui-btn.beer_quantity_button{
border :none;
color : black !important;
background: #D6DE23 !important;
}
.ui-listview>li h1.add_beer_to_cart_letters {
color:white !important;
}
button.add_beer_to_cart {
background: transparent !important;
}
#font-face {
font-family:'RNS Camelia';
font-style : normal;
font-weight: 900;
src : local('RNS Camelia'), url(<?php echo $this->config->base_url();?>fonts/RNS_Camelia.otf);
}
#font-face{
font-family:'Simply City Light';
font-style : normal;
font-weight: normal;
src : local('Simply City Light'), url(<?php echo $this->config->base_url();?>fonts/siml023.ttf);
}
.settings_button_quantity{
width :100px;
height :22px;
float :right;
}
a .settings_popup_link_quantity{
height:22px;
}
.ui-content .ui-listview-inset, .ui-panel-inner>.ui-listview-inset{
margin:0;
}
#title{
text-shadow : none!important;
margin-bottom: 11px;
width : 100%;
font-size : 52px !important;
font-family :'RNS Camelia' !important;
color : #D6DE23 !important;
padding-left : 5%;
}
.background_image{
width :100% !important;
padding-bottom:160px !important;
margin-left :auto !important;
margin-right :auto !important;
display :block;
background :url(<?php echo $this->config->base_url();?>images/beer_cup.png) no-repeat;
z-index :-21;
}
.ui-page{
background-image :url('<?php echo $this->config->base_url();?>images/background.png') !important;
width :100%;
background-size :100% 100%;
background-repeat:no-repeat;
}
.small_logo{
padding-top: 4px;
width : 138px;
height : 52px;
}
#settings_popup_beer_quantity li a,#settings_popup_beer_quantity,.ui-navbar li:last-child .ui-btn {
color :black !important;
font-family:'Simply City Light'!important;
}
#settings_popup_beer_quantity .ui-li-divider{
background:black!important;
}
</style>
</div>
</body>
</html>
I copied your code into a fiddle here and it appears to be working for me. at least the popup shows up when I click the link.
https://jsfiddle.net/2y9ouhzb/
<div data-role="page" id="index">
<div data-role="popup" id="settings_popup_beer_quantity" data-position="right">
<ul data-inset="true" data-role="listview" data-theme="a" data-divider-theme="b" style="min-width:210px;">
<li data-role="list-divider">Settings</li>
<li data-icon="false">
<?php echo anchor( 'login/logout/', 'Logout', array( 'title'=>"Logout", "rel" =>"external"));?></li>
<li data-icon="false">
<?php echo anchor( 'customer_settings/', 'Settings',array( 'title'=>"Settings","rel" =>"external"));?></li>
</ul>
</div>
<div style="float:left;">
<img class="small_logo" border="0" src="<?php echo $this->config->base_url();?>images/small_logo.png" alt="cup Bar Express" />
</div>
<div data-role="header" style="width:100px;float:right;" data-position="right">
<div class="settings_button_quantity" data-role="navbar">
<ul>
<li>Settings
</li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<div role="main" class="ui-content" id="index">
<div class="background_image">
<div class="ui-grid-solo" id="title">QUANTITY</div>
<ul data-role="listview" data-split-theme="a" data-inset="true">
<?php if(isset($beer_quantity_button)){ echo $beer_quantity_button; } ?>
</ul>
</div>
</div>
</div>
<!-- /page -->
Related
I have a bootstrap 5 menu outside the canvas and I want to change the hamburger icon when closing and opening the menu so that a cross and the hamburger appear, but I can't do it
<nav id="main-nav" class="navbar navbar-expand-md navbar-dark bg-primary nav-menu-
home" aria-labelledby="main-nav-label">
<h2 id="main-nav-label" class="screen-reader-text">
<?php esc_html_e( 'Main Navigation', 'understrap' ); ?>
</h2>
<div class="<?php echo esc_attr( $container ); ?>">
<!-- <button type="button" class="btn-close btn-close-white text-reset" data-bs-
dismiss="offcanvas"
aria-label="Close"></button> -->
<!-- data-
toggle="modal" data-target="#menuModal" -->
<button class="navbar-toggler colapsed" type="button" data-bs-toggle="offcanvas" data-
bs-target="#navbarNavOffcanvas" aria-controls="navbarNavOffcanvas" aria-
expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap'
); ?>">
<span class="toggler-icon top-bar"></span>
<span class="toggler-icon middle-bar"></span>
<span class="toggler-icon bottom-bar"></span>
</button>
<!-- <button type="button" class="btn-close text-reset" data-bs-
dismiss="offcanvas" aria-label="Close"></button> -->
<div class="offcanvas offcanvas-start bg-primary" tabindex="-1"
id="navbarNavOffcanvas">
<div class="offcanvas-header justify-content-end">
<button type="button" class="btn-close btn-close-white text-reset" data-
bs-dismiss="offcanvas" aria-label="Close"></button>
</div><!-- .offcancas-header -->
<!-- The WordPress Menu goes here -->
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'offcanvas-body ',
'container_id' => '',
'menu_class' => 'navbar-nav justify-content-end flex-grow-1 pe-
3',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'depth' => 2,
'walker' => new Understrap_WP_Bootstrap_Navwalker(),
)
);
?>
</div><!-- .offcanvas -->
</div><!-- .container(-fluid) -->
</nav><!-- .site-navigation -->
CSS
.navbar-toggler {
border: 0 !important;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none !important;
box-shadow: none !important;
border: 0 !important;
}
/* Lines of the Toggler */
.toggler-icon{
width: 30px;
height: 3px;
background-color: #e74c3c;
display: block;
transition: all 0.2s;
}
/* Adds Space between the lines */
.middle-bar{
margin: 5px auto;
}
/* State when navbar is opened (START) */
.navbar-toggler .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggler .middle-bar {
opacity: 0;
filter: alpha(opacity=0);
}
.navbar-toggler .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
/* State when navbar is opened (END) */
/* State when navbar is collapsed (START) */
.navbar-toggler.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggler.collapsed .middle-bar {
opacity: 1;
filter: alpha(opacity=100);
}
.navbar-toggler.collapsed .bottom-bar {
transform: rotate(0);
}
/* State when navbar is collapsed (END) */
/* Color of Toggler when collapsed */
.navbar-toggler.collapsed .toggler-icon {
background-color: #777777;
}
Please use the following tutorial https://jsfiddle.net/8xvaozm2/1/
but it is being used with toggle navigation and not with off canvas, does anyone know how it could be done?
there is a .show class that shows the menu when clicking, I used it but it didn't work for me
I'm trying to build a tab navigation bar like the example below (copied from Ionic docs) with Angular Material. Each of these tabs will lazy load different pages.
To lazy load pages on each tab, the doc suggests using nav mat-tab-nav-bar component. However, this component presents the tabs bar at the top of the page and I need this bar at the bottom of it.
As in the docs, the mat-tab-group has this attribute called headerPosition that can be used to position the tab bar at the bottom of the page, but it doesn't work on the nav mat-tab-nav-bar component.
Can anyone help me either create a tab that can open pages/components in lazy mode with mat-tab-group or position the nav mat-tab-nav-bar component at the bottom of the page?
Currently my component is:
tabs.page.html
<nav mat-tab-nav-bar headerPosition="below" >
<a mat-tab-link *ngFor="let page of pages" (click)="activePage = page.path" [active]="activePage == page.path"> {{ page.label }} </a>
</nav>
<router-outlet></router-outlet>
tabs.page.ts
// ...
export class TabsPage implements OnInit {
readonly pages = [
{
path: 'page1',
label: 'Page 1',
},
{
path: 'page2',
label: 'Page 2',
},
];
activePage = this.pages[0].path;
constructor() { }
// ...
}
Heres the sample.
.page-container {
background-color: #f8f9fa;
padding: 10px;
width: 90%;
min-width: 378px;
}
.parent-container,
.d-flex {
display: flex;
}
.child-centered,
.m-auto {
/* Magic! */
margin: auto;
max-width: 430px;
min-width: 220px;
}
div#topdiv, div#bottomdiv{
position:fixed;
left: 0px;
width: 100%;
color: #CCC;
}
div#topdiv{top:0px;}
div#bottomdiv {bottom:0px;}
<div class="parent-container">
<div class="child-centered">
<router-outlet>
</router-outlet>
<div style="height: 150px;"> </div>
<footer id="bottomdiv" class="parent-container">
<nav mat-tab-nav-bar class="child-centered mat-tab-group-inverted-header main-nav" >
<a mat-tab-link style="height: 80px; width: 40px;" *ngFor="let link of navLinks"
routerLink="{{ link.location }}" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
<div style="padding: 10px;">
<mat-icon class="example-tab-icon">{{ link.icon }}</mat-icon>
<div>{{ link.label }}</div>
</div>
</a>
</nav>
</footer>
</div>
</div>
I have a bunch of divs inside a display:flex parent div. The parent div is sortable with jquery-ui's sortable function.
As well as allowing the user to sort, I would like to add some buttons that do an animated sort.
For example, with this HTML:
<div class="sortable">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
</div>
I would like a button that when pressed would animate moving div1 to be between div4 and div5, moving smoothly (in fact, a little erratically as if it were being moved by hand would be even better) and shifting all the divs it passes, so it looks as if it were being moved by hand.
Is this possible using jquery-ui's sortable(), or am I better off building a custom solution?
Consider the following example.
$(function() {
function arrange(obj, pre) {
obj = $(obj);
var t = $("[id^='div']:eq(" + pre + ")");
obj.animate({
top: t.position().top + "px"
}, {
duration: 1000,
step: function(i) {
$(this).position({
my: "left top",
at: "left bottom",
of: t,
});
},
complete: function() {
obj.detach().css("top", "").insertAfter(t);
}
});
}
$(".sortable").sortable().disableSelection();
$("#arrange").click(function() {
arrange($("#div1"), 3);
});
});
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
.sortable div {
margin: 0 3px 3px 3px;
padding: 0.4em;
height: 18px;
}
<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="sortable">
<div id="div1" class="ui-state-default">Item 1</div>
<div id="div2" class="ui-state-default">Item 2</div>
<div id="div3" class="ui-state-default">Item 3</div>
<div id="div4" class="ui-state-default">Item 4</div>
<div id="div5" class="ui-state-default">Item 5</div>
</div>
<button class="btn" id="arrange">Arrange</button>
Built from https://css-tricks.com/jquery-ui-position-function/
Update
$(function() {
function swap(a, b, ms) {
console.log("Swap:", a.attr("id"), "with", b.attr("id"));
a.animate({
top: b.position().top + "px"
}, {
duration: ms,
step: function(i) {
$(this).position({
my: "left top",
at: "left bottom",
of: b,
});
},
complete: function() {
a.detach().css("top", "").insertAfter(b);
}
});
}
function arrangeAfter(a, b) {
var n = a.next();
for (var c = parseInt(n.attr("id").slice(-1)); n.index() <= b.index(); c++) {
swap(a, n, 400);
n = $("#div" + (c + 1));
}
}
$(".sortable").sortable().disableSelection();
$("#arrange").click(function() {
arrangeAfter($("#div1"), $("#div4"));
});
});
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
.sortable div {
margin: 0 3px 3px 3px;
padding: 0.4em;
height: 18px;
}
<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="sortable">
<div id="div1" class="ui-state-default">Item 1</div>
<div id="div2" class="ui-state-default">Item 2</div>
<div id="div3" class="ui-state-default">Item 3</div>
<div id="div4" class="ui-state-default">Item 4</div>
<div id="div5" class="ui-state-default">Item 5</div>
</div>
<button class="btn" id="arrange">Arrange</button> <button class="btn" id="reset">Reset</button>
I'm using jQuery-UI v1.11.2 in order to create some draggable and droppable divs, and Boostrap 3.1.1 as well.
I'd like to know why a Boostrap column class is interfering with the draggable "hint".
In other words, as I drag an image from my Gallery div to my Dashboard div, the Dashboard div comes in FRONT of the image hint. Then once I DROP my image on the Dashboard div, the image re-appears.
If I remove the col-md-8 class from the Dashboard div, this problem goes away.
Here are two screen shots to demonstrate:
1) WITHOUT the Bootstrap column class on the right div (image hint looks good)
2) With the Bootstrap column class on the right div (image hint disappears)
Here's the HTML code :
<section id="gadgets-view" class="mainbar" data-ng-controller="gadgets">
<div class="container-fluid">
<div class="row-fluid">
<!-- based on http://jqueryui.com/droppable/#photo-manager -->
<div class="ui-widget ui-helper-clearfix col-md-4"> <-- GALLERY OF WIDGETS -->
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Tree Grid</h5>
<img src="images/treegrid.jpg" alt="Hierarchy Grid" width="96" height="72">
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Area Chart</h5>
<img src="images/chart_area.jpg" alt="Area Chart" width="96" height="72">
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Bar Chart</h5>
<img src="images/chart_bar.png" alt="Bar Chart" width="96" height="72">
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Column Chart</h5>
<img src="images/chart_column.png" alt="Column Chart" width="96" height="72">
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Line Chart</h5>
<img src="images/chart_line.png" alt="Line Chart" width="96" height="72">
</li>
</ul>
</div>
<div class="col-md-8">
<div id="dashboard" class="ui-widget-content ui-state-default "> <-- DROPPABLE DASHBOARD -->
<h4 class=""><span class="ui-icon ui-icon-image"></span>Dashboard</h4>
</div>
<div>
</div>
</div>
</section>
The CSS :
<style>
.ui-widget-header{
font-size: 65%;
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
}
.ui-state-highlight {
border: 2px dashed #d3d3d3; /* override to show dashed border when dragging */
}
#gallery {
float: left;
width: 75%;
min-height: 12em;
}
.gallery.custom-state-active {
background: #eee;
}
.gallery li {
list-style: none;
float: left;
width: 96px;
padding: 0.4em;
margin: 0 0.4em 0.4em 0;
text-align: center;
}
.gallery li h5 {
margin: 0 0 0.4em;
cursor: move;
}
.gallery li a {
float: right;
}
.gallery li a.ui-icon-zoomin {
float: left;
}
.gallery li img {
width: 100%;
cursor: move;
}
#dashboard {
float: left;
width: 45%;
height:500px;
padding: 1%;
}
#dashboard h4 {
line-height: 25px;
margin: 0 0 0.4em;
}
#dashboard h4 .ui-icon {
float: left;
}
#dashboard .gallery h5 {
display: none;
}
The JavaScript to create drag/drop areas :
<script>
$(function () {
// there's the gallery and the dashboard
var $gallery = $("#gallery"),
$dashboard = $("#dashboard");
// let the gallery items be draggable
$("li", $gallery).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
// let the dashboard be droppable, accepting the gallery items
$dashboard.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function (event, ui) {
debugger;
deleteImage(ui.draggable);
}
});
// let the gallery be droppable as well, accepting items from the dashboard
$gallery.droppable({
accept: "#dashboard li",
activeClass: "custom-state-active",
drop: function (event, ui) {
recycleImage(ui.draggable);
}
});
// image deletion function
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Remove gadget' class='ui-icon ui-icon-minus'></a>";
function deleteImage($item) {
$item.fadeOut(function () {
var $list = $("ul", $dashboard).length ?
$("ul", $dashboard) :
$("<ul class='gallery ui-helper-reset'/>").appendTo($dashboard);
//$item.find("a.ui-icon-dashboard").remove(); // DO NOT REMOVE ORIGINAL WIDGET ICON - 11/19/2014 BM:
$item.append(recycle_icon).appendTo($list).fadeIn(function () {
//$item.animate({ width: "48px" }).find("img").animate({ height: "36px" });
$item.animate().find("img").animate();
});
});
}
// image recycle function
var dashboard_icon = "<a href='link/to/dashboard/script/when/we/have/js/off' title='Add this gadget' class='ui-icon ui-icon-plus'</a>";
function recycleImage($item) {
$item.fadeOut(function () {
$item
.find("a.ui-icon-refresh")
.remove()
.end()
.css("width", "96px")
.append(dashboard_icon)
.find("img")
.css("height", "72px")
.end()
.appendTo($gallery)
.fadeIn();
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage($link) {
var src = $link.attr("href"),
title = $link.siblings("img").attr("alt"),
$modal = $("img[src$='" + src + "']");
if ($modal.length) {
$modal.dialog("open");
} else {
var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
.attr("src", src).appendTo("body");
setTimeout(function () {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1);
}
}
// resolve the icons behavior with event delegation
$("ul.gallery > li").click(function (event) {
var $item = $(this),
$target = $(event.target);
if ($target.is("a.ui-icon-dashboard")) {
deleteImage($item);
} else if ($target.is("a.ui-icon-zoomin")) {
viewLargerImage($target);
} else if ($target.is("a.ui-icon-refresh")) {
recycleImage($item);
}
return false;
});
});
I found the problem you describe (but i did not found a relation with the Bootstrap Grid Classes).
For my the problem seems to be related to the z-index and can be solved by adding the following style rules at the end of your CSS code:
.ui-draggable-handle {
z-index: 1;
}
I borrowed the following code from another post and it works for as far as it goes. I need to swap between two lists of items. I can't figure out how to change the code for multiple items.
I'm using Coldfusion so where you see cfoutput I am looping over a query. I do it twice. Once for starting lineup players (they have a valid week number) and again for bench players. The idea is to move a bench player to the starting lineup.
<html>
<head>
<style>
#wrapper {
border: thin dotted orange;
}
</style>
<script type="text/javascript">
jQuery.fn.swapWith = function(to) {
return this.each(function() {
var copy_to = $(to).clone();
var copy_from = $(this).clone();
$(to).replaceWith(copy_from);
$(this).replaceWith(copy_to);
});
};
$(document).ready(function() {
options = {
revert: true,
helper: 'clone'
};
$("li").draggable(options);
$('#wrapper').droppable({
drop: function(event, ui) {
// window.setTimeout(function(){
$('#one').swapWith($('#two'));
$(".ui-draggable-dragging").remove();
$("li").draggable(options);
//}, 1);
}
});
});
</script>
</head>
<body>
<form>
<ul id="wrapper">
<li id='one'>
<div style="width: 100px; height: 100px; border: 1px solid green">
one<br /></div>
</li>
<li id='two'>
<div style="width: 110px; height: 110px; border: 1px solid red">
two<br /></div>
</li>
</ul>
<br />
</form>
</body>
</html>