Fiddle:
https://jsfiddle.net/r73b14y5/3/
script works fine but cant get the image to slide back to the original location if another link is not clicked.
at the moment the image stays where ever it last hovered over, instead of only staying at a link if the new link was clicked. and sliding back to the original link if nothing is clicked.
Also whats the best way to delay the hover state so as the mouse flys over the element quickly it doesnt activate. hover intent.
HTML:
<div class="bblock1" style="height:100%;">
<div class="container">
<div class="bodymainMaxS">
<div class='tabbed_content'>
<div class='tabs'>
<div class='moving_bg'> </div>
<span class='tab_item tab_item_color'>OVERVIEW</span>
<span class='tab_item'>THE SCIENCE</span>
<span class='tab_item'>ORDER</span>
<span class='tab_item'>REPLACEMENT FILTERS</span>
</div>
</div>
</div>
</div>
<div class="bblock3" style="height:100%;">
<div class="container">
<div class="bodymainMaxS">
</div>
</div>
</div>
** key part of Script:**
$(".tab_item").mouseover(function() {
var $this = $(this);
$this.parent().find(".moving_bg").stop().animate({
left: $this.position()['left']
}, { duration: 300 });
});
rest of script
var TabbedContent = {
current: {i:null, obj:null},
init: function() {
$(".tab_item").click(function() {
$(".tab_item").removeClass("tab_item_color");
$(this).addClass("tab_item_color");
var $this = $(this);
TabbedContent.slideContent($this);
});
TabbedContent.current.i = 0;
TabbedContent.current.obj = $(".tabslider li").eq(0);
},
slideContent: function($obj) {
var $container = $obj.closest(".tabbed_content"),
$contentContainer = $('.bodymainMaxS'),
$tabslider = $contentContainer.find(".tabslider");
var i = $obj.index() - 1;
var $lis = $tabslider.find("li");
$new = $lis.eq(i);
if(i === TabbedContent.current.i) {
return;
}
$lis.hide().filter($new.add(TabbedContent.current.obj)).show();
var margin_1 = (i > TabbedContent.current.i) ? 0 : -$new.width();
var margin_2 = (i < TabbedContent.current.i) ? 0 : -$new.width();
$tabslider.stop().css({
marginLeft: margin_1 + "px"
}).animate({
marginLeft: margin_2 + "px"
}, 400);
TabbedContent.current.i = i;
TabbedContent.current.obj = $new;
}
}
TabbedContent.init();
Here is the complete JS fixed replace whole javascript with this one (you can test here with JSFiddle )
removed TabbedContent because that was not being used (if you need that you can always copy from your question)
var isTabSelected = false;
var lastSelectedTabLeftPos;
$(".tab_item").mouseover(function() {
var $this = $(this);
$this.parent().find(".moving_bg").stop().animate({
left: $this.position()['left']
}, { duration: 300 });
});
$( ".tab_item" ).mouseout(function() {
if(isTabSelected){
$(".moving_bg").stop().animate({
left: ""+lastSelectedTabLeftPos
}, { duration: 300 });
}else
{
$(".moving_bg").stop().animate({
left: "0"
}, { duration: 300 });
}
});
$(".tab_item").click(function() {
isTabSelected = true;
var $this = $(this);
lastSelectedTabLeftPos = $this.position()['left'];
});
Related
I have a FB feed in a web page
When I press the Prev and Next buttons, the next and previous news feeds are displayed. But I would like to use the animate function when scrolling.
I have tried to use this lines of code:
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(currentFbDiv).offset().top
}, 200);
but it not works as expected.
Can you please guide me how can I use in my example? Thanks
<script>
jQuery(document).ready(function($){
var pagePositon = 0,
sectionsSeclector = $(".cff-item"),
$scrollItems = $(sectionsSeclector),
offsetTolorence = 20,
fbDivHeights = [],
result = [],
currentFbDiv = 0,
$fbDivWrapper = $('#cff'),
pageMaxPosition = $scrollItems.length-1;
sectionsSeclector.each(function(index, item) {
var sum = fbDivHeights.reduce(function(a, b) { return a + b; }, 0);
fbDivHeights.push( $(item).outerHeight());
result = fbDivHeights.map((s => a => s += a)(0));
});
//Map the sections:
$scrollItems.each(function(index,ele) {
$(ele).attr("debog",index).data("pos",index);
});
// Bind to scroll
$(window).bind('scroll',upPos);
//Move on click:
$('#facebook_ticker_controls a').click(function(e){
//alert("aaa");
if ($(this).hasClass('next') && currentFbDiv < pageMaxPosition) {
currentFbDiv++;
$fbDivWrapper.css('margin-top', -result[currentFbDiv-1]);
/* pagePositon++;*/
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(currentFbDiv).offset().top
}, 200);
}
if ($(this).hasClass('prev') && currentFbDiv!= 0 && currentFbDiv <= pageMaxPosition) {
if(currentFbDiv == 1) {
$fbDivWrapper.css('margin-top', '0px');
} else {
currentFbDiv--;
$fbDivWrapper.css('margin-top', -result[currentFbDiv-1]);
}
/*$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
return false;*/
}
return false;
});
//Update position func:
function upPos(){
var fromTop = $(this).scrollTop();
var $cur = null;
$scrollItems.each(function(index,ele){
if ($(ele).offset().top < fromTop + offsetTolorence)
$cur = $(ele);
});
if ($cur != null && pagePositon != $cur.data('pos')) {
pagePositon = $cur.data('pos');
}
}
});
</script>
<div class="tab-content">
<div class="tab-pane active fade in">
<ul class="list-unstyled" id="facebook_ticker">
<?php echo do_shortcode("[custom-facebook-feed]"); ?>
</ul>
</div>
<div id="facebook_ticker_controls" class="ticker-controls">
<div style="position: absolute; z-index: 1000; background-color: rgba(0,0,0,.7); height: 35px; width: 350px;">
<span class="glyphicon glyphicon-chevron-down"></span> Previous
Next <span class="glyphicon glyphicon-chevron-up"></span>
</div>
</div>
</div><!-- end tab-content -->
I’m working on a one page website (I’m using jQuery One Page Nav Plugin by Travor Davis http://github.com/davist11/jQuery-One-Page-Nav), I’ve a fixed menu on the left side and some scrolling content on the right side.
Unfortunately the height of my main content div is fixed, then I used overflow hidden property to hide the content beyond the div, but with overflow hidden the plugin can’t working and the content doesn’t scroll anymore.
How can I solve the problem?
Please see the current code below:
This is the plugin code:
;(function($, window, document, undefined){
// our plugin constructor
var OnePageNav = function(elem, options){
this.elem = elem;
this.$elem = $(elem);
this.options = options;
this.metadata = this.$elem.data('plugin-options');
this.$win = $(window);
this.sections = {};
this.didScroll = false;
this.$doc = $(document);
this.docHeight = this.$doc.height();
};
// the plugin prototype
OnePageNav.prototype = {
defaults: {
navItems: 'a',
currentClass: 'active',
changeHash: false,
easing: 'swing',
filter: '',
scrollSpeed: 750,
scrollThreshold: 0.5,
begin: false,
end: false,
scrollChange: false
},
init: function() {
// Introduce defaults that can be extended either
// globally or using an object literal.
this.config = $.extend({}, this.defaults, this.options, this.metadata);
this.$nav = this.$elem.find(this.config.navItems);
//Filter any links out of the nav
if(this.config.filter !== '') {
this.$nav = this.$nav.filter(this.config.filter);
}
//Handle clicks on the nav
this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));
//Get the section positions
this.getPositions();
//Handle scroll changes
this.bindInterval();
//Update the positions on resize too
this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));
return this;
},
adjustNav: function(self, $parent) {
self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
$parent.addClass(self.config.currentClass);
},
bindInterval: function() {
var self = this;
var docHeight;
self.$win.on('scroll.onePageNav', function() {
self.didScroll = true;
});
self.t = setInterval(function() {
docHeight = self.$doc.height();
//If it was scrolled
if(self.didScroll) {
self.didScroll = false;
self.scrollChange();
}
//If the document height changes
if(docHeight !== self.docHeight) {
self.docHeight = docHeight;
self.getPositions();
}
}, 250);
},
getHash: function($link) {
return $link.attr('href').split('#')[1];
},
getPositions: function() {
var self = this;
var linkHref;
var topPos;
var $target;
self.$nav.each(function() {
linkHref = self.getHash($(this));
$target = $('#' + linkHref);
if($target.length) {
topPos = $target.offset().top;
self.sections[linkHref] = Math.round(topPos);
}
});
},
getSection: function(windowPos) {
var returnValue = null;
var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
for(var section in this.sections) {
if((this.sections[section] - windowHeight) < windowPos) {
returnValue = section;
}
}
return returnValue;
},
handleClick: function(e) {
var self = this;
var $link = $(e.currentTarget);
var $parent = $link.parent();
var newLoc = '#' + self.getHash($link);
if(!$parent.hasClass(self.config.currentClass)) {
//Start callback
if(self.config.begin) {
self.config.begin();
}
//Change the highlighted nav item
self.adjustNav(self, $parent);
//Removing the auto-adjust on scroll
self.unbindInterval();
//Scroll to the correct position
self.scrollTo(newLoc, function() {
//Do we need to change the hash?
if(self.config.changeHash) {
window.location.hash = newLoc;
}
//Add the auto-adjust on scroll back in
self.bindInterval();
//End callback
if(self.config.end) {
self.config.end();
}
});
}
e.preventDefault();
},
scrollChange: function() {
var windowTop = this.$win.scrollTop();
var position = this.getSection(windowTop);
var $parent;
//If the position is set
if(position !== null) {
$parent = this.$elem.find('a[href$="#' + position + '"]').parent();
//If it's not already the current section
if(!$parent.hasClass(this.config.currentClass)) {
//Change the highlighted nav item
this.adjustNav(this, $parent);
//If there is a scrollChange callback
if(this.config.scrollChange) {
this.config.scrollChange($parent);
}
}
}
},
scrollTo: function(target, callback) {
var offset = $(target).offset().top;
$('html, body').animate({
scrollTop: offset
}, this.config.scrollSpeed, this.config.easing, callback);
},
unbindInterval: function() {
clearInterval(this.t);
this.$win.unbind('scroll.onePageNav');
}
};
OnePageNav.defaults = OnePageNav.prototype.defaults;
$.fn.onePageNav = function(options) {
return this.each(function() {
new OnePageNav(this, options).init();
});
};
})( jQuery, window , document );
This is the html code:
<div id="wrapper">
<div id="container">
<div id="left-col">
<nav id="nav">
<ul>
<li class="active">
Project
</li>
<li>
Concept
</li>
<li>
Clients
</li>
<li>
Technical<br>specification
</li>
<li>
Gallery
</li>
</ul>
</div>
<div id="right-col">
<section id="project">
</section>
<section id="concept">
</section>
<section id="project">
</section>
<section id="clients">
</section>
<section id="technical-specification">
</section>
<section id="gallery">
fgdgddg
</section>
</div>
</div>
To see the actual website in action, please click here:
http://methlabtest2.altervista.org/EN/
Thanks in advance.
You added overflow: hidden; and it is doing what it is meant to do (hide overflow and don't scroll).
If you want overflow to scroll use overflow: scroll; overflow-y;
In my html page I have 2 divs with toggle function.
I need to modify this js to let it close other div when one is open
my js
jQuery( "div.bk-toggle-header" ).click(function(){
jQuery(this).siblings('div.bk-toggle-content-outer-wrap').animate({
height: 'toggle'
}, 'slow', function() {
});
jQuery(this).parents('div.bk-toggle').toggleClass('bk-toggle-closed');
});
My html
<div class="bk-toggle bk-toggle-closed">
<div class="bk-toggle-header content-separator">
<span class="title">First Tab</span>
<span class="bk-header-button"></span>
</div>
<div class="bk-toggle-content-outer-wrap"> content
</div></div>
<div class="bk-toggle bk-toggle-closed">
<div class="bk-toggle-header content-separator">
<span class="title">Second Tab</span>
<span class="bk-header-button"></span>
</div>
<div class="bk-toggle-content-outer-wrap" > content
</div></div>
I would appreciate some help to toggle divs one at a time.
Working demo http://jsfiddle.net/f492H/
Solution below will toggle div one at a time. you could play around with other Jquery ways as well !like is(':visible')
API used:
.slideToggle: http://api.jquery.com/slideToggle/
.parents : http://api.jquery.com/parents/
Hope it fits your needs :)
Code
$('.bk-toggle-content-outer-wrap').hide();
$('.title').on('click', function (e) {
$('.bk-toggle-content-outer-wrap').hide();
$(this).parents('.bk-toggle').find('.bk-toggle-content-outer-wrap').slideToggle();
});
I can offer you an accordion class I've written for a previous project. It's fairly flexible and should accomplish what you're asking and more. Documentation is... non-existent, but I'm happy to answer any implementation questions if you choose to use it.
Here it is in a fiddle: http://jsfiddle.net/YjAgb/1/
UPDATE:
Here is another fiddle working with your html structure: http://jsfiddle.net/WfWEP/
And, for the sake of being thorough, here's the demo code.
HTML
<div id='accordion'>
<div class='accHead'>Head 1</div>
<div class='accBody'>Body 1</div>
<div class='accHead'>Head 2</div>
<div class='accBody'>Body 2</div>
<div class='accHead'>Head 3</div>
<div class='accBody'>Body 3</div>
</div>
JavaScript
function accordion(options){
this.index = options.index;
var openChild = false;
var self = this;
var cEvent = {};
var slideSpeed = 200;
var headClass = '.accHead';
var bodyClass = '.accBody';
var $parent = options.parent;
var $heads = $parent.find(headClass);
var $bodies = $parent.find(bodyClass)
$heads.on('click', function(e){
var headClicked = $heads.index($(this)) + 1;
var wasTriggered = (!e.clientX);
var previousOpen = (headClicked == openChild) ? headClicked : openChild;
var newOpen = (headClicked == openChild) ? false : headClicked;
$heads.add($bodies).removeClass('on');
if (!openChild) {
var type = 'open';
} else if(headClicked == openChild) {
var type = 'close';
} else {
var type = 'swap';
}
cEvent = { clicked: headClicked,
triggered: wasTriggered,
previousOpen: previousOpen,
openChild: newOpen,
headElement: $(this),
bodyElement: $bodies.index(headClicked - 1),
type: type,
accordion: self
};
options.click_callback(cEvent);
if (openChild) closeLevel((headClicked == openChild) ? headClicked : openChild);
if ((!openChild) || (headClicked != openChild)) openLevel(headClicked);
openChild = newOpen;
});
var openLevel = function(levelId)
{
var $bodyEl = $bodies.eq(levelId - 1);
var $headEl = $heads.eq(levelId - 1);
cEvent.bodyElement = $bodyEl;
cEvent.headElement = $headEl;
$headEl.addClass('on');
$bodyEl.addClass('on').slideDown(slideSpeed, function(){
options.open_callback(cEvent);
})
}
var closeLevel = function(levelId)
{
var $bodyEl = $bodies.eq(levelId - 1);
var $headEl = $heads.eq(levelId - 1);
cEvent.bodyElement = $bodyEl;
cEvent.headElement = $headEl;
$bodyEl.slideUp(slideSpeed, function(){
options.close_callback(cEvent);
});
}
this.closeAll = function()
{
$heads.add($bodies).removeClass('on');
$bodies.slideUp(0);
return this;
}
this.click = function(levelId, caller)
{
if(caller.index != this.index) $heads.eq(levelId - 1).trigger('click');
}
this.getHead = function(levelId)
{
return $heads.eq(levelId - 1);
}
this.getBody = function(levelId)
{
return $bodies.eq(levelId - 1);
}
this.getParentAcc = function()
{
return $parent;
}
}
newAcc = new accordion({
parent: $('#accordion'),
click_callback: function(){},
open_callback: function(){},
close_callback: function(){},
})
.closeAll();
I have this website: backlinkbeat.com. To the down, there are 3 divs having the background images. Each background-image includes a number like "1", "2", "3". I want those divs to blink as traffic lights respectively.
The script I wrote is not blinking the lights correctly as you can see in the link which means that it is not blinking the correct order. I want to blink them in the way are shown in the markup:
<div style="float:left; height:400px;">
<div style=" margin-top:50px;">
<div class="list cufon one" id="blink1" style="width:420px;">put you on just any, <span style="color:#1fbfd1;">www.yourwebsite.com</span>
</div>
<div class="list cufon two" id="blink2" style="width:420px;">Press <span style="color:#1fbfd1;">"do it"</span>
</div>
<div class="list cufon three" id="blink3" style="width:420px;">see the backlinks <span style="color:#1fbfd1;">roll in!</span>
</div>
</div>
</div>
The script I wrote which donot work correctly is:
setInterval(function () {
setTimeout(function(){
var vis1 = $("#blink1").css("visibility");
vis1 = (!vis1 || vis1 == "visible") ? "hidden" : "visible";
$("#blink1").css("visibility", vis1);
}, 1000);
}, 1000);
setInterval(function() {
setTimeout(function(){
var vis2 = $("#blink2").css("visibility");
vis2 = (!vis2 || vis2 == "visible") ? "hidden" : "visible";
$("#blink2").css("visibility", vis2);
}, 2000);
}, 2000);
setInterval(function() {
setTimeout(function(){
var vis3 = $("#blink3").css("visibility");
vis3 = (!vis3 || vis3 == "visible") ? "hidden" : "visible";
$("#blink3").css("visibility", vis3);
}, 3000);
}, 3000);
Thanks,
Areeb
I suggest you give your elements a common class, ex:
<div class="blink">One</div>
<div class="blink">Two</div>
<div class="blink">Three</div>
Then you can simplify your code to:
//Cache element collection and keep a reference to the visible element
var $elements = $('.blink').css('visibility','hidden'),
$visible = $elements.first().css('visibility','visible');
//Single interval function to handle blinking
setInterval(function(){
//Hide visible element
$visible.css('visibility','hidden');
//Find next one
var $next = $visible.next('.blink');
if(!$next.length)
$next = $elements.first();
//Show next element
$visible = $next.css('visibility','visible');
},1000);
Demo fiddle
This may be what you're looking for. http://jsfiddle.net/andaywells/eQuXn/15/
I have modified this code: http://jsfiddle.net/paislee/pdsu7/5/
So that each div stays in position, the 'hold' div keeps it there.
$(document).ready(function () {
var delay = 5000,
fade = 500;
var banners = $('.banner');
var len = banners.length;
var i = 0;
setTimeout(cycle, delay);
function cycle() {
$(banners[i % len]).fadeOut(fade, function () {
$(banners[++i % len]).fadeIn(fade, function () {
setTimeout(cycle, delay);
});
});
}
});
Perhaps this example will help you.
CSS
.lamp {
height: 30px;
width: 30px;
border-style: solid;
border-width: 2px;
}
.lampRed {
background-color: red;
}
.lampYellow {
background-color: yellow;
}
.lampGreen {
background-color: green;
}
HTML
<div id="trafficLight">
<div>Click to Start and Stop</div>
<div class="lamp" id="Red"></div>
<div class="lamp" id="Yellow"></div>
<div class="lamp" id="Green"></div>
</div>
Javascript
var changeState = (function () {
var state = 0,
lamps = ["Red", "Yellow", "Green"],
lampsLength = lamps.length,
order = [
[5000, "Red"],
[3000, "Red", "Yellow"],
[5000, "Green"],
[3000, "Yellow"]
],
orderLength = order.length,
lampIndex,
orderIndex,
sId;
return function (stop) {
if (stop) {
clearTimeout(sId);
return;
}
var lamp,
lampDOM;
for (lampIndex = 0; lampIndex < lampsLength; lampIndex += 1) {
lamp = lamps[lampIndex];
lampDOM = document.getElementById(lamp);
if (order[state].indexOf(lamp) !== -1) {
lampDOM.classList.add("lamp" + lamp);
} else {
lampDOM.classList.remove("lamp" + lamp);
}
}
sId = setTimeout(changeState, order[state][0]);
state += 1;
if (state >= orderLength) {
state = 0;
}
};
}());
document.getElementById("trafficLight").addEventListener("click", (function () {
var state = false;
return function () {
changeState(state);
state = !state;
};
}()), false);
On jsfiddle
I'm using .draggable() and .droppable() to calculate the price of the items that were dropped in the container, based on the weight and a constant defining the per gram price of all items.
Now I'd like to have one of the items dropped within the container by default, together with the correct calculations and the possibility to drag more/less items over the container. The positioning should be like image 1 when the reset button is pressed and I must be able to drag the default item out of the container just like the other draggables.
This is what it looks like now:
And this is how I want it to look like on page load:
I haven't found any documentation covering default droppables like this, so I don't really know where to start. I've prepared a Jsfiddle here: http://jsfiddle.net/gPFMk/ and a Jsbin for those who like it better http://jsbin.com/oxuguc/1/edit
var price = 0, math = '', items = [], state = 'outside', wprice = 209;
function calcPrice(math) {
price = 0;
weight = 0;
$('.counter-number').remove();
addticker(0);
console.log("Item array: " + items);
$.each( items, function( key, value ) {
price+= parseInt($(".draggable[data-item='" + value + "']").attr('id'));
weight+= $(".draggable[data-item='" + value + "']").data('weight');
loadticker(price);
});
$('#weight').html('<span>weight </span>' + weight + ' g');
}
function revertDraggable($selector) {
$selector.each(function() {
var $this = $(this),
position = $this.data("originalPosition");
if (position) {
$this.animate({
left: position.left,
top: position.top
}, 500, function() {
$this.data("originalPosition", null);
});
}
items = [];
$('#droppable').removeClass('active');
$('.counter-number').remove();
calcPrice();
});
}
$(function() {
$.each($('.draggable'), function() {
var $this = $(this),
weight = $this.data('weight');
$this.attr('id', weight*wprice);
});
$(".draggable").draggable({
revert: function (event, ui) {
$(this).data("draggable").originalPosition = {
top: 0,
left: 0
};
return !event;
},
cursor: "move",
cursorAt: {
top: 56,
left: 56
},
stack: "div",
containment: "#container",
scroll: false
});
$("#droppable").droppable({
drop: function(e, u) {
$(this).addClass('active');
if ($.inArray(u.draggable.data('item'), items) == -1) {
items.push(u.draggable.data('item'));
price = 0;
weight = 0;
calcPrice('add');
u.draggable.data('state', 'inside');
}
if (!u.draggable.data("originalPosition")) {
u.draggable.data("originalPosition",
u.draggable.data("draggable").originalPosition);
}
},
over: function() {
$(this).addClass('active');
},
out: function(e, u) {
if(u.draggable.data('state') == 'inside') {
u.draggable.data('state', 'outside');
var itemIndex = $.inArray(u.draggable.data('item'), items);
items.splice(itemIndex, 1);
price = $("#droppable").text();
calcPrice('remove');
}
if (items.length === 0)
$('#droppable').removeClass('active');
}
});
$('#container').on('click', '#reset', function() {
revertDraggable($(".draggable"));
});
});
<div id="container">
<div id="heft">
<div id="info">
<div id="price">
<span>price</span>
<div class="counter-wrap">
<div class="counter-number">
</div>
</div>€
</div>
<div id="weight">
<span>weight</span>
0 g
</div>
<button id="reset">Reset</button>
</div>
<div id="droppable"></div>
</div>
<div id="items">
<div class="draggable" data-item="3" data-weight="15" data-state="outside"><img src="http://wemakeawesomesh.it/nyancat/nyan.gif" width="90" height="90"></div>
<div class="draggable" data-item="2" data-weight="35" data-state="outside"><img src="http://wemakeawesomesh.it/nyancat/nyan.gif" width="90" height="90"></div>
<div class="draggable" data-item="1" data-weight="8" data-state="outside"><img src="http://wemakeawesomesh.it/nyancat/nyan.gif" width="90" height="90"></div>
</div>
</div>
If I move the code of one item to the droppable div like suggested, revertDraggable() and revert: won't work as expected.
Here's a solution that simulates an item drop for the first item on document load.
The difficulty was to mimic what happens during a drop:
$(".draggable[data-item='1']").attr(
"style",
"position: relative; z-index: 10; left: 300px; top: 30px"
);
var onDrop = function(e,u) {
if ($.inArray(u.draggable.data('item'), items) == -1) {
items.push(u.draggable.data('item'));
price = 0;
weight = 0;
calcPrice('add');
u.draggable.data('state', 'inside');
}
if (!u.draggable.data("originalPosition")) {
u.draggable.data("originalPosition",
u.draggable.data("draggable").originalPosition);
}
};
onDrop.call($("#droppable"),
{},{ draggable: $(".draggable[data-item='1']") }
);
Here is the link to the jsfiddle.