Sortable clone helper not working - javascript

Maybe I don't understand how clone works with sortable, but here is what I would like to do.
When sorting an item I would like a clone of the item I am dragging remain until I stop drop the item in its new position.
Here's the code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<style type="text/css">
.sort { width: 150px; }
.ui-state-highlight { background-color: #000; height:2px; }
</style>
</head>
<body>
<div>
<ul class="sort">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$('.sort').sortable({
helper: 'clone',
placeholder: 'ui-state-highlight',
opacity: '.5'
})
})
</script>
</body>
</html>
Thanks in advance for the help!

When you use the clone option, the original item is hidden with style="display: none" when you start dragging. You could attach a handler to the sort event (or whatever event hides the original item) to re-show it. Everything should work for you then.
P.S. I used Firebug to look at what was happening to the original element. If you're not using it you really ought to be!

Its just one way to hack it. You can lead from here on. Change your config as below.
$('.sort').sortable({
helper: 'clone',
placeholder: 'ui-state-highlight',
opacity: '.5',
start: function(event, ui) {
$('.sort').find('li:hidden').show();
}
})

I have two lists, sortable1 and sortable2.
I want to clone items from sortable1 to sortable2 and vice versa.
One improvement have to be to check if it is top element, if it is. prev() will not work.
So check if there is a prev, if not use after().
My solution was this:
$("#sortable1").sortable({
helper:"clone",
connectWith: "#sortable2",
start:function(event,ui){
$(ui.item).show();
clone = $(ui.item).clone();
before = $(ui.item).prev();
},
stop:function(event, ui){
before.after(clone);
}
}).disableSelection();
$("#sortable2").sortable({
helper:"clone",
connectWith: "#sortable1",
start: function(event, ui){
$(ui.item).show();
clone = $(ui.item).clone();
before = $(ui.item).prev();
},
stop:function(event, ui){
before.after(clone);
}
}).disableSelection();

While it might not fix the issue you're having. There is an extra comma at the end of your parameters.
opacity: '.5',

Few words about improvements that John Bledsoe said.
For cloning first elements in #sortable1 I use such a code:
stop:function(event, ui){
if (before.length) before.after(clone);
else $(this).prepend(clone);
},

Related

dragging li from one ul to another ul

I'm trying to move a <li> from one <ul> to another <ul> using jquery-ui draggable and droppable.
Currently I have
HTML
<div>
<h4><span>basket</span></h4>
<ul id="basket" class="basket">
<!-- items -->
<li id="test1">test1</li>
<li id="test2">test2</li>
</ul>
</div>
<div>
<h4><span>courses</span></h4>
<ul id="courses" class="courses">
<!-- items -->
</ul>
</div>
JS
$("#test1").draggable({
revert: "invalid",
containment: "document",
cursor: "move"
});
$("#test2").draggable({
revert: "invalid",
containment: "document",
cursor: "move"
});
$("#basket").droppable({
accept: "li",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
basketCourse(ui.draggable);
}
});
$("#courses").droppable({
accept: "li",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
courseCourse(ui.draggable);
}
});
function basketCourse(item){
console.log("added course to basket");
}
function courseCourse(item){
console.log("added course to courses");
}
How do I move test1 and test2 from the basket and to the courses?
Right now I can drag #test1 and #test2 around inside the basket, and it will run basketCourse(), but it never seems to be able to allow me to drop either of them inside courses.
I am using bootstrap, jquery and jquery-ui..
Your list doesn't have enough height to drop there items, just set min-height: 100px or whatever you want, and you'll be able to drop items there - https://jsfiddle.net/825pqyz8/

Jquery ui Drag/Drop and Sortable

I have two div containers
top_div
bottom_div
initially top_div will be blank. I'm using jQuery UI drag and drop. I'm able to drag contents from bottom_div to top_div.
My requirement is in above top_div I need to sort (using sortable jQuery UI) the contents.
And after sorting when I refresh the page it should not change its position.
Please any help is appreciated Thanks!
Html Code
<div id="top_div">
</div>
<br/>
<div id="bottom_div">
<ul>
<li class="ui-state-default">Sachin Tendulkar</li>
<li class="ui-state-default">Ab de Villiers</li>
<li class="ui-state-default">MS Dhoni</li>
<li class="ui-state-default">Ricky Ponting</li>
<li class="ui-state-default">Rahul</li>
</ul>
</div>
Jquery Code
<script type="text/javascript">
$(function ()
{
$("#bottom_div li").draggable({
tolerance:'fit',
revert: "invalid",
refreshPositions: true,
drag: function (event, ui)
{
ui.helper.addClass("draggable");
},
stop: function (event, ui)
{
ui.helper.removeClass("draggable");
}
});
$("#top_div").droppable(
{
drop: function (event, ui)
{
if ($("#top_div li").length == 0)
{
$("#top_div").html("");
}
ui.draggable.addClass("dropped");
$("#top_div").append(ui.draggable).sortable();
}
});
});
</script>

Same JavaScript function for two different buttons(I/O button)

I have two which are created dynamically,
<div id="flipbutton1" class="flipButton">
<ul>
<li>OFF</li>
<li class="on">ON</li>
</ul>
</div>
also this
<div id="flipbutton2" class="flipButton">
<ul>
<li>OFF</li>
<li class="on">ON</li>
</ul>
</div>
Now i want to use this same JavaScript function but on different id.
Example is:
<script>
$(document).ready(function(){
$("#flipbutton1 ul li").click(function(){
$("#flipbutton1 ul li").removeClass("on");
$(this).addClass("on");
});
});
Problem:
It should work in such a way that when I click flipbutton1 it should work the same way but when i click flipbutton2 it should chanhge #flipbutton1 to #flipbutton2.
Any help would be appreciated.
Regards,
Do you want only one of the <li>s on?
$(".flipButton ul li").click(function () {
$(this).siblings().andSelf().toggleClass("on");
});
This will work
$(document).ready(function(){
$(".flipButton ul li").click(function(){
$(this).toggleClass("on")
});
});
Edited version:
$(document).ready(function(){
$(".flipbutton ul li").click(function(){
$(".flipbutton ul li.on").removeClass("on").addClass("off");
$(this).removeClass("off").addClass("on");
});
});
This ought to work even if you add more flipbuttons, as long as they use the .flipbutton class.

Using javascript function parameters to show jquery tabs

Actually I am trying to do jquery tabs. I have written a code that needs rework and probably better ways to implement. I think I could use function arguments to achieve this, but I am not sure. Can somebody tell me how to achieve this in a better way. Though my code works but I think it is rudimentary. I would also like only one tab to display a background color if this is active.
http://jsfiddle.net/5nB4P/
HTML:
<div id="nav">
<ul>
<li>First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
</div>
<div id="content">
<div class="tabs first">First Div content</div>
<div class="tabs">Second Div content</div>
<div class="tabs">Third Div content</div>
</div>
Script:
$(function() {
$("li :eq(0)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(".tabs:gt(0)").hide();
$(".tabs:eq(0)").show();
})
$("li :eq(1)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(this).css("background","red")
$(".tabs:gt(1), .tabs:lt(1)").hide();
$(".tabs:eq(1)").show();
})
$("li :eq(2)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(".tabs:lt(2)").hide();
$(".tabs:eq(2)").show();
})
})
There is a much better way to achieve this. Here you go
$(function() {
$("li").click(function() {
$(this).css("background","red").siblings().css("background","none");
$(".tabs").hide().eq($(this).index()).show();
return false;
});
})
Working Demo
As #Niels mentioned for setting the background style you can have a dedicated class(active) and add/remove this class instead of setting the inline sytle.
FYI..In the above code $(this).index() gives the position of the first element within the jQuery object relative to its sibling elements
CSS:
.active {
background-color:red;
}
JQuery:
$('li').click(function(){
$this = $(this);
$this.addClass('active').siblings().removeClass('active');
$('.tabs:eq(' + $this.index() + ')').show().siblings().hide();
});
Here is a demo: http://jsfiddle.net/5nB4P/6/
Here is the way that I updated this to make it smaller and I believe to be more effective and easier to use:
http://jsfiddle.net/5nB4P/7/
Code:
$("#nav ul li").click(function(){
var id = $(this).attr("rel");
$("#nav ul li").each(function(){
$(this).removeClass("active");
});
$(this).addClass("active");
$("#content div").each(function(){
$(this).hide();
});
$("#"+id).show();
});
Do you mean this? http://jsfiddle.net/tsukasa1989/5nB4P/1/
$(function() {
$("#nav li").click(function(){
// Handle active status
$(this).addClass("active").siblings().removeClass("active");
// Show the tab at the index of the LI
$(".tabs").hide().eq($(this).index()).show();
})
// Don't forget to set first tab as active one at start
.eq(0).addClass("active");
})
If you want to style the active tab use
#nav li.active{}
My approach doesn't use arguments, but HTML class and id references to shorten things: http://jsfiddle.net/ZScGF/1/

jQuery .hover() is driving me crazy

I have a project that uses drop-down menus that are nested ul's, like so:
<ul id="nav">
<li id="thome" class="navtab">
HOME
<ul id="subnav_home" class="submenu">
<li>Dashboard</li>
<li>SMS</li>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
Using jQuery, I've added a .hover() to the .navtab li that .show()s the .submenu ul. The problem is that when the cursor moves into the new ul, the .hover()-out for the .navtab fires, .hide()ing the sub-menu, despite the fact that I have the height of the li so that it entirely wraps the .submenu ul.
I've tried adding a delay to the .hide(), but if you pass your cursor over the navtab bar quickly, you get all of the sub-menus at once.
Any solutions for me? Here's the relevant JavaScript. The hide() function is identical to .show() except that it shrinks the height and hides the ul (obviously).
$('.navtab').hover(
function(){
tabShowSubnav($(this).attr('id'));
},
function(){
tabHideSubnav($(this).attr('id'));
});
function tabShowSubnav(menu){
var sb = '#' + menu + ' > .submenu';
var tb = '#' + menu;
$('.navtab').each(function(){
if (!$(this).hasClass('current_page')){
$(tb).addClass('nav_hover');
}
});
$(tb).css('height','239px');
$(sb).show();
}
$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('current_page').addClass("nav_hover");
},
function() {
});
$(".submenu").mouseout(function(){
$(this).hide();
});
$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('.current_page').addClass("nav_hover");
},
function() {
$(this).children(".submenu").hide();
});
This worked for me.
I finally had to go with the jQuery plugin hoverIntent, that ignores children for the purpose of mouseout.

Categories