Introduction
I currently use the jQuery .sortable function and it works like a charm. However this is only client side and I would like to store the new sorting position to the backend (mySQL database).
I store the sorting order using numerical field (and retrieved using SQL ORDER BY).
Menu text Sorting ID
------------ ---------
Menu item #1 => 0
Menu item #2 => 1
Menu item #3 => 2
Menu item #4 => 3
Current HTML code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/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.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #4</li>
</ul>
</body>
</html>
Tinker.io link: http://tinker.io/b3f27
The question
Now, how would I store the new position into the database? Adding an ID to the sortable and posting it back to a php script which would lookup both sorting positions and switch them over is what I would do but I'm looking forward for your opinions.
This is basic idea is sending data using AJAX after update:
JS:
$("#sortable").sortable({
update : function () {
var items = $('#sortable').sortable('serialize');
$.get("sort.php?"+items);
}
});
HTML:
<ul id="sortable">
<li id="s_1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #1</li>
<li id="s_2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #2</li>
<li id="s_3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #3</li>
<li id="s_4" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #4</li>
</ul>
Here you need to set id to each LI, please see working demo
PHP:
<?php
var_dump($_GET);
?>
You can find more detailed answers here
Related
this would be my first time for a drag and drop functionality. i have to make timetable application for a college which would require dragging from a list of teacher responsibilities on the left side containing all the required values and dropping into a timetable slot on the right side, then popping up a dialog box for asking room number and then performing various checks at php and mysql level and then finally inserting into database. Also, without mentioning this has to be an ajax solution.
I really want this to be a pure javascript solution and not some frameworks like jquery, prototype etc as i have a race against time and i haven't ever used any frameworks before so i cant dish out time to learn one of these now. But if u guys cant help me with pure javascript, i'l have to use one of the above mentioned frameworks.
Please help as soon as possible. Also, do ask if u want some more clarification as to what exactly i want to achieve.
First Option is : In core javascript you can use using HTML5 drag drop feature but it has problems specially in safari browser.
Second Option is : http://jqueryui.com/sortable/#connect-lists
Put following code I'll tell you how to call ajax. I am still here to help you till you get expected output
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
#left, #right { border:1px solid #000000;min-height:100px;min-width:100px;list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
#left li, #right li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( "#left, #right" ).sortable({
connectWith: ".connectedSortable",
receive: function(event,ui){
console.log("old ui id = "+ui.sender.attr("id")+" new ul id = "+this.id+" li id "+$(ui.item).attr("id"));
if(ui.sender.attr("id") != this.id)
{
//Your ajax call will come here
$.ajax({
type: "POST",
url: "logic.php",
// Write you //php mysql logic here you'll get all your data in logic.php file
data: { left: ui.sender.attr("id"), right: this.id , responsibility:$(ui.item).attr("id") }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
}
}
}).disableSelection();
});
</script>
</head>
<body>
<ul id="left" class="connectedSortable">
<li id="1" class="ui-state-default">Item 1</li>
<li id="2" class="ui-state-default">Item 2</li>
<li id="3" class="ui-state-default">Item 3</li>
<li id="4" class="ui-state-default">Item 4</li>
<li id="5" class="ui-state-default">Item 5</li>
</ul>
<ul id="right" class="connectedSortable">
<li id="6" class="ui-state-highlight">Item 1</li>
<li id="7" class="ui-state-highlight">Item 2</li>
<li id="8" class="ui-state-highlight">Item 3</li>
<li id="9" class="ui-state-highlight">Item 4</li>
<li id="10" class="ui-state-highlight">Item 5</li>
</ul>
</body>
</html>
Currently, I'm doing up an auto-scroll function for a list on my site.
However, after the first item in the list disappears, the second one kinds of 'jump in to position' of the first item. What i want to know if it is possible to make the second item slide in to position in jquery and how can i do it? The following is the javascript code and html. Thanks for any help in advance.
Javascript:
<script>
var ad_refresh=setInterval(function(){
var $target=$("div.manufacturer_list ul li:eq(1)");
var position_1 = $target.position();
$target.fadeOut('slow', function(){
$target.appendTo('div.manufacturer_list ul').show();
});
},5000);
</script>
HTML(Sample) generated:
<div class="manufacturer_list">
<ul>
<li style="float:left;width:200px">Item 1</li>
<li style="float:left;width:200px">Item 2</li>
<li style="float:left;width:200px">Item 3</li>
<li style="float:left;width:200px">Item 4</li>
<li style="float:left;width:200px">Item 5</li>
...
...
...
</ul>
</div>
Do you want to do scrolling/rotating vertical menu items into left side?
http://jsbin.com/welcome/53677
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var ad_refresh=setInterval(function(){
var $target=$("div.manufacturer_list ul li:first");
$target.animate({
marginLeft: -200,
opacity: 0,
}, function(){
$target.css({
marginLeft: 200
}).appendTo('div.manufacturer_list ul').animate({
marginLeft: 0,
opacity: 1
})
});
},1000);
</script>
<style type="text/css">
.manufacturer_list {
width: 800px;
height: 40px;
overflow: hidden;
}
.manufacturer_list li {
float:left;
width: 200px;
}
</style>
</head>
<body>
<div class="manufacturer_list">
<ul>
<li>foo1</li>
<li>foo2</li>
<li>foo3</li>
<li>foo4</li>
<li>foo5</li>
</ul>
</div>
</body>
</html>
I guess you can do it with transition properties in css. Please let me know if it works for you
transition-property: all;
transition-duration: 0.5s;
-moz-transition-property: all; /* Firefox 4 */
-moz-transition-duration: 0.5s; /* Firefox 4 */
-webkit-transition-property: all; /* Safari and Chrome */
-webkit-transition-duration: 0.5s; /* Safari and Chrome */
-o-transition-property: all; /* Opera */
-o-transition-duration: 0.5s; /* Opera */
I'm having a problem with a javascript that I want to include in a wordpress template page.
What I'm trying to do:
On this page - http://www.pcworld.ro/vworker/ - I want to call a javascript that will fade-in/out 6 images (you can see the first image in the top right side of the header).
This is the script: http://www.pcworld.ro/vworker/wp-content/themes/visualtime/js/innerfade.js
This is what I have in header.php:
<?php wp_enqueue_script('innerfade', '/vworker/wp-content/themes/visualtime/js/innerfade.js', array('jquery'));?>
<?php wp_head();?>
<script type="text/javascript">
$(document).ready(
function(){
$('ul#screenshots').innerfade({
speed: 1000,
timeout: 4000,
type: 'random',
containerheight: '259px'
});
});
</script>
This is what I have in functions.php:
<?php
function load_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('innerfade', '/wp-content/themes/visualtime/js/innerfade.js', array('jquery'));
}
add_action('init', 'load_scripts');
?>
And this is the code that should be responsible for the javascript in homepage.php (the wordpress template page where I need the javascript to work):
<div id="screenshot" style="overflow:hidden;">
<ul class="innerfade" id="screenshots" style="list-style: none outside none; margin: 0pt; padding: 0pt; cursor: pointer; position: relative; height: 259px;" onclick="location.href='#'">
<li style="z-index: 6; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot1.jpg" alt="Room Booking System">
</li>
<li style="z-index: 5; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot2.jpg" alt="Complete Administration Panel">
</li>
<li style="z-index: 4; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot3.jpg" alt="Meeting Room Bookings">
</li>
<li style="z-index: 3; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot4.jpg" alt="View Statistics of All Room Bookings">
</li>
<li style="z-index: 2; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot5.jpg" alt="Including a Helpdesk System">
</li>
<li style="z-index: 1; position: absolute; display: list-item;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot6.jpg" alt="Intelligent Recurring Bookings">
</li>
</ul>
</div>
I'm a beginner when it comes to wordpress and an absolute noob when there's javascript involved. Could you please explain me what I'm doing wrong and to fix it?
This is common among wordpress theme developers, they automatically include jQuery.noConflict() in jquery file to avoid collision with other libraries.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Several choices:
Remove jQuery.noConflict(); from bottom of the jquery file
-or-
Replace $ in all your code with the text jQuery. The plugin files you use should be insulated and are OK
-or-
Change
$(document).ready(
function(){
//.........
}
to
jQuery(document).ready(
function($){
//.........
}
WIth $ as argument in ready you can use $ inside it
I'm new to jQueryUI and I'm not able to drag multiple <li> elements to the drop area. However I managed to drag one and drop it on the drop area. Please can anyone help me with this.
JavaScript
$(function() {
$trash= $( "#trash" );
$("a", ".polaroids").draggable({
zIndex: 999,
revert: "invalid" ,
helper: function(){
$copy = $(this).clone();
return $copy;},
appendTo: 'body',
scroll: false
});
$("a", ".polaroids").selectable();
$trash.droppable({
accept: ".polaroids a",
activeClass: "custom-state-active",
drop: function( event, ui ) {
$(this).append(ui.draggable);
}
});
});
Here is the <div> in which the <li> elements are dragged but one by one
<div class="st_view_container">
<div class="st_view">
<?php
foreach($gpID as $k => $v) {
?>
<div id="stv_content_<?php echo $v;?>" class="st_tab_view st_first_tab_view">
<ul class="polaroids" id ="polaroids">
<?php
$sql2=mysql_query("select * from user_group WHERE group_id='$v' AND user_id=3");
$i=1;
while($row=mysql_fetch_array($sql2)) {
$memid=$row['member_id'];
$sql1=mysql_query("select * from users_profile WHERE uid='$memid'");
while($row1=mysql_fetch_array($sql1)) {
$ufname=$row1['fname'];
$ulname=$row1['lname'];
$upic=$row1['profile_pic'];
?>
<li>
<a href="#" title="<?php echo $ufname; ?>">
<img src="../<?php echo $upic; ?>" rel="<?php echo $row1['uid']?>" width="65px" height="65px" />
</a>
</li>
<?php
if($i%6==0) {;}
$i++;
}
?>
</ul>
</div>
<?php } ?>
</div> <!-- /.st_view -->
</div> <!-- /.st_view_container -->
and here is the <div> in which i want the multiple elements to be dropped, but not one by one.
<div id="trash" style="width:200px; height:200px; border:1px solid;">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>
Here is a demo based on some research…
Is it possible to link two jquery.ui draggables together?
grouping draggable objects with jquery-ui draggable
Can't drop jquery ui helper on droppable
How to reimplement jQuery's default helper in a custom helper
and me playing with the jQueryUI droppable photo manager demo which is what you are using as a template.
Functionality includes single click and drag (as is the default behaviour) or use Ctrl+left click to select multiple items and then drag. The drag helper function is used to select all the items with class="selected" and the drop function is customised to extract the img elements from the container the drag helper added them to. The other function simple enables the Ctrl+click behaviour.
The following code is duplicated below from the demo but does require jQuery, jQueryUI and one of the jQueryUI themes.
HTML
<ul id="draggable">
<li><img src="nature-q-c-50-50-1.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-2.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-3.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-4.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-5.jpg" alt="" /></li>
<li><img src="nature-q-c-50-50-6.jpg" alt="" /></li>
</ul>
<div id="trash">
<h4 class="ui-widget-header">Trash<span class="ui-icon ui-icon-trash"></span></h4>
</div>
CSS
body {
font-family:"Trebuchet MS";
}
#draggable {
margin:0;
padding:10px;
width:300px;
list-style-type:none;
background-color:#000;
}
li {
display:inline;
}
img {
border:5px solid white;
}
.image-group img {
margin-right:5px;
}
#trash {
margin-top:10px;
width:200px;
height:200px;
border:1px dotted #000;
}
.selected {
border-color:#aed0ea
}
#trash h4 {
margin:0;
padding:0 5px;
}
.ui-icon {
display:inline-block;
}
JavaScript
$('#draggable li').draggable({
revertDuration:100,
helper:function() {
var selected = $('#draggable img.selected');
if (selected.length === 0) {
selected = $('img', $(this)).addClass('selected');
}
console.log('selected', selected);
var container = $('<div class="image-group"/>');
container.append(selected.clone());
console.log('container', container);
return container;
},
cursorAt:{ left:25,top:25 }
});
$('#trash').droppable({
drop: function(event, ui) {
var newItems = $(ui.helper).find('img').clone(false)
.removeClass('selected');
$(this).append(newItems);
console.log('ui.draggable', ui.draggable);
$('#draggable img.selected').parent().remove();
}
});
$('#draggable li').click(function(event) {
if (event.ctrlKey) {
$('img', $(this)).toggleClass('selected');
}
});
I am attempting to update some sortable divs that are connected with connectwith. I have done a single table before and the update query works, but when mutiple divs are involved it gets tricky. The problem is I have a field in the database called div that needs to update as well with whatever div the sortable object is getting dropped into AS WELL AS put it in a specific order within that div.
EDIT: SOOO, how can I create a sortable update query for multiple div.id locations?
The results I am getting from the code work for just updating the order inside one div, but across multiple divs there is no update. Plus, I'm not exactly sure of the easiest way to find the div I moved the content to and save that to the database.
Okay, so here's the code I have so far for just updating the order within one div:
$(".heriyah").sortable({
handle : '.handle',
connectWith: ".heriyah",
revert: "invalid",
update : function () {
var order = $('.heriyah').sortable('serialize');
$("#info").load("admin/sortable.php?"+order);
}
});
And the PHP:
foreach ($_GET['listItem'] as $position => $item) :
$sql[] = "UPDATE `temp` SET `order` = $position WHERE `id` = $item";
endforeach;
print_r ($sql);
And the HTML/PHP to produce the content (using alot of PHP and JQuery):
<script type="text/javascript">
(function() {
$('div.heriyah').each(function() {
$(this).html('<div class="add"><div id="add_button_container"><div id="add_button" class="edit_links">+ ADD NEW CONTENT</div></div></div><div class="clear"></div><div class="placeable" style="height:20px;background-color:#fff;"></div></div>');
var curID = $(this).attr('id');//get the id before you go into fallr
$('.add').click(function() {
$.fallr('show', {
content : '<iframe width="620" height="600" src="<? echo $URL ?>/manage_content.php?pageID=<? echo $pageID; ?>&div='+ curID +'"></iframe>',
width : 620 + 5, // 100 = for width padding
height : 600,
closeKey : true,
closeOverlay : true,
buttons : {}
});
});
});
})();
<?
include_once('system/js/dbc.php');
$pageID = $_REQUEST['pageID'];
$getdiv2 = mysql_query("SELECT * FROM temp WHERE pageID = '$pageID' ORDER BY `order` ASC");
while ($row = mysql_fetch_assoc($getdiv2))
{
echo "$('#{$row['div']}.heriyah').append('<div class=sortable id=listItem_{$row['id']}><div id=heriyah_content class=sortable_header>{$row['title']}<br>{$row['maintext']}<div id=heriyah_handle class=handle></div><a onClick=edit_{$row['id']}();return false><div id=heriyah_content_hover></div></a></div></div>');\n";
}
?>
</script>
<script>
$(".heriyah").sortable({
handle : '.handle',
connectWith: ".heriyah",
revert: "invalid",
update : function () {
var order = $('.heriyah').sortable('serialize');
$("#info").load("admin/sortable.php?"+order);
}
});
</script>
<div id="info"></div>
I have produced something based on the jQuery UI connect-lists example.
I have not implemented the backend calling or database side components but I'm sure you can work that out. I am only interested in capturing what has moved and to where.
The receive event is triggered when you drag items between lists so we can use that.
We also need to catch the update event but are not interested in items that are already being dealt with by the receive event. To do this we need to check to see if ui.sender is undefined (as it will be for all non-connected list transfers). However it seems that the update event calls all the sortable containers when the update has completed. We only want to capture the data when the updated item's parent is the same as the list receiving the update event trigger. (I hope that makes sense!)
In summary the receive event will be used to capture all the inter connect-list transfers and the update event will capture any sorting that happens within an element list.
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://jqueryui.com/demos/sortable/"/>
<meta charset="utf-8">
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.6.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.sortable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li, #sortable3 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( "#sortable1, #sortable2, #sortable3" ).sortable({
connectWith: ".connectedSortable",
update: function(event, ui){
if(($(ui.sender).attr('id') == undefined)&&($(this).attr('id') == ui.item.parent().attr('id'))){
alert('UPDATE ' + $(this).attr('id') + ' ' + (ui.item.index()+1) + ' ' + $(ui.item).text());
}
},
receive: function(event, ui){
alert('RECEIVE: ' + $(ui.sender).attr('id') + '=>' + $(this).attr('id') + ' ' + (ui.item.index()+1) + ' ' + $(ui.item).text());
}
}).disableSelection();
});
</script>
</head>
<body>
<div class="demo">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">A</li>
<li class="ui-state-default">B</li>
<li class="ui-state-default">C</li>
<li class="ui-state-default">D</li>
<li class="ui-state-default">E</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">F</li>
<li class="ui-state-highlight">G</li>
<li class="ui-state-highlight">H</li>
<li class="ui-state-highlight">I</li>
<li class="ui-state-highlight">J</li>
</ul>
<ul id="sortable3" class="connectedSortable">
<li class="ui-state-default">K</li>
<li class="ui-state-default">L</li>
<li class="ui-state-default">M</li>
<li class="ui-state-default">N</li>
<li class="ui-state-default">O</li>
</ul>
</div>
</body>
</html>