I have 3 item which is item 1, item 2, and item 3
item1 with <data-price="10">， item1 with <data-price="20">， item1 with <data-price="30">
These items are draggable and when these items drag and drop on the red area, it will sum up the total
It works successfully on a desktop browser but the item is not draggable on the mobile browser.
I tried using Draggin.js. It's draggable on mobile browser but the javascript function(the calculation) is not working.
Is there another way to make it draggable on a mobile browser?
var price = 20, math = '', items = [], state = 'outside';
$(function() {
function calcPrice(math) {
var value = 0;
price = 20;
console.log("Item array: " + items);
$.each( items, function( key, value ) {
price+= $(".draggable[data-item='" + value + "']").data('price');
});
$("#test2").html(price)
}
$(".draggable").draggable({
containment: "#container",
scroll: false
});
$("#droppable").droppable({
drop: function(e, u) {
if(u.draggable.data('state') == 'outside') {
items.push(u.draggable.data('item'));
u.draggable.data('state', 'inside');
calcPrice('add');
}
},
out: function(e, u) {
if(u.draggable.data('state') == 'inside') {
u.draggable.data('state', 'outside');
var myIndex = $.inArray(u.draggable.data('item'), items);
items.splice(myIndex, 1);
price = $("#droppable").text();
calcPrice('remove');
}
}
});
});
#container {
width: 500px;
height: 350px;
background: #ccc;
}
#droppable {
height: 100px;
width: 100%;;
background: #ff0000;
}
.draggable {
width: 100px;
height: 50px;
border: 1px solid black;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script src="https://aegasiagroup.com/wp-content/themes/Avada/js/DragDropTouch.js"></script>
<meta charset=utf-8 />
</head>
<body>
<div class="row">
<div id="container" class="col-sm-4">
<div id="droppable">Drag and drop here</div>
<div>
<p>SUGAR: <span id="test2">20</span></p>
</div>
<div class="draggable" data-item="1" data-price="10" data-state="outside">Item 1 = [Price 10]</div>
<div class="draggable" data-item="2" data-price="20" data-state="outside">Item 2 = [Price 20]</div>
<div class="draggable" data-item="3" data-price="30" data-state="outside">Item 3 = [Price 30]</div>
</div>
</div>
</body>
Related
The first column is displayed by default. If I click on the "1" I want to display "1.1, 1.2, 1.3" and then if I click on "1.1" display "1.1.1, 1.1.2, 1.1.3", but if I click on "1.2" hide the "1.1.1, 1.1.2, 1.1.3" and display "1.2.1, ...". If I click on "2" hide "1.1, 1.2, 1.3" and hide "1.2.1, ..." and display "2.1, 2.2" .....
This is always nested in 3 layers.
The HTML code have to look like as I wrote in my scource code.
It will not be a menu system.
I do not have any idea how to make this work.
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>$(document).ready(function(){$("#load").attr("src","table.html");});</script>
</head>
<body>
<div id="page">
<iframe width="100%" height="100%" frameborder="0" id="load" src="table.html" ></iframe>
</div>
</body>
</html>
table.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
</div>
<div class="Second">
<div class="S_1">
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</div>
<div class="S_2">
<li>2.1</li>
</div>
</div>
<div class="Third">
<div class="T_1">
<div class="T_1.1">
<li>1.1.1</li>
<li>1.1.2</li>
</div>
....
</div>
....
</div>
</div>
</div>
</body>
</html>
style.css
* {margin: 0px;padding: 0px;}
li {list-style: none;}
.main {display:flex;justify-content: center;}
.First {background:green;width:33.33vw;}
.Second {background:gold; width:33.33vw;}
.Third {background:gray;width:33.33vw;}
A solution which builds the concept from first class:
var $sel = $(".First li");
var nbr = $sel.length;
var lastval ="";
$sel.clone().appendTo(".Second").clone().appendTo(".Third");
$(".main div:not([class=First])").hide();
$(document).on("click", "li", function() {
var val = $(this).text();
var l = val.length;
if(lastval == val || l > 3) return;
lastval = val;
switch(val.length){
case 1:
$(".main div").show().last().hide();
$(".Second li").map((i, e) => $(e).find("a").text(val + "." + (i + 1)));
break;
case 3:
$(".Third").show().find("li").map((i, e) => $(e).find("a").text(val + "." + (i + 1)));
break;
}
});
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
.main {
display: flex;
justify-content: left;
}
.First {
background: green;
width: 33.33vw;
}
.Second {
background: gold;
width: 33.33vw;
}
.Third {
background: gray;
width: 33.33vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
<li>3</li>
</div>
<div class="Second">
</div>
<div class="Third">
</div>
</div>
</div>
Basically, this is the scrap code where you can start. It is simple logic. The code is creating HTML and changing the other div's HTML.
$(document).ready(function(){
$('body').on('click', 'a', function() {
var number = $(this).html();
var parent = $(this).parent().parent().attr('class');
var htmlss = '';
var i;
if(parent == 'First'){
$('.Second').html('');
$('.Third').html('');
for(i = 1; i < 4; i++) {
htmlss += '<li><a href=#>' + number + '.' + i +'</a></li>';
}
$('.Second').html(htmlss);
}
else if (parent == 'Second'){
$('.Third').html('');
for(i = 1; i < 4; i++) {
htmlss += '<li><a href=#>' + number + '.' + i +'</a></li>';
}
$('.Third').html(htmlss);
}
});
});
* {margin: 0px;padding: 0px;}
li {list-style: none;}
.main {display:flex;justify-content: center;}
.First {background:green;width:33.33vw;}
.Second {background:gold; width:33.33vw;}
.Third {background:gray;width:33.33vw;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
</div>
<div class="Second">
</div>
<div class="Third">
</div>
</div>
</div>
</body>
</html>
Here is a pure JavaScript solution. I did not touch the HTML as that was declared forbidden, so I had to come up with some js mumbo jumbo to get the initial layout. Following is a working snippet:
function clickMe(id) {
let query;
if (id.length == 1) {
query = document.querySelector(".S_1");
second.style.opacity = 1;
third.style.opacity = 0;
} else if (id.length == 3) {
query = document.querySelector(".T_1").children[0];
selector = ".T_1.1";
third.style.opacity = 1;
}
[...query.children].forEach((node, i) => {
node.innerText = `${id}.${i + 1}`;
});
}
const hideNotUseful = document.querySelector(".S_2").remove();
const first = document.querySelector(".First");
const thirdChild = document.createElement("li");
thirdChild.innerText = 3;
first.append(thirdChild);
const second = document.querySelector(".Second");
const third = document.querySelector(".Third");
second.style.opacity = 0;
third.style.opacity = 0;
[...first.children, ...second.children[0].children].forEach(node => {
node.addEventListener("click", e => clickMe(node.innerText));
});
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
.main {
display: flex;
justify-content: center;
}
.First {
background: green;
width: 33.33vw;
}
.Second {
background: gold;
width: 33.33vw;
}
.Third {
background: gray;
width: 33.33vw;
}
<div>
<div class="main">
<div class="First">
<li>1</li>
<li>2</li>
</div>
<div class="Second">
<div class="S_1">
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</div>
<div class="S_2">
<li>2.1</li>
</div>
</div>
<div class="Third">
<div class="T_1">
<div class="T_1.1">
<li>1.1.1</li>
<li>1.1.2</li>
<li>1.1.3</li>
</div>
</div>
</div>
</div>
</div>
I am looking for jquery animation similar to this website http://cuberto.com/.
So far i have accomplished this link http://codepen.io/mirmibrahim/pen/MJoGBY through pagePiling.js. Can anyone assist me complete it exactly the way on curberto. I dont know how to load half of the page with image and half with text and open the next section to be from the square animating on first slide.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pagePiling.js plugin - Horizontal scroll</title>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="pagePiling.js plugin by Alvaro Trigo." />
<meta name="keywords" content="pile,piling,piling.js,stack,pages,scrolling,stacking,touch,fullpile,scroll,plugin,jquery" />
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="../jquery.pagepiling.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--script src="../jquery-1.9.1.js"></script-->
<script type="text/javascript" src="../jquery.pagepiling.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Plugin intialization
*/
$('#pagepiling').pagepiling({
direction: 'horizontal',
menu: '#menu',
scrollingSpeed: 2000,
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['black', '#1C252C', '#F27B1D', '#39C'],
navigation: {
'position': 'right',
'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
},
afterRender: function() {
$('#pp-nav').addClass('custom');
console.log("After Render ");
},
afterLoad: function(anchorLink, index) {
// $.fn.pagepiling.setAllowScrolling(false);
console.log("After Load " + index);
if (index == 1) {
console.log("index " + index);
} else if (index == 2) {
}
if (index > 1) {
$('#pp-nav').removeClass('custom');
} else {
$('#pp-nav').addClass('custom');
}
},
onLeave: function(index, nextIndex, direction) {
console.log("After Load " + index);
if (index == 1) {
/* $( "#block" ).animate({
width: "100%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "12em",
borderWidth: "20px"
}, 4000 , function() {
// Animation complete.
//alert("s");
});
*/
$("#block").animate({
width: "58%"
}, 1000, function() {
console.log("animation finished");
$.fn.pagepiling.setScrollingSpeed(500);
});
} else if (index == 2 && nextIndex == 1) {
$("#block").animate({
width: "0%"
}, 3000, function() {
console.log("animation finished");
$.fn.pagepiling.setScrollingSpeed(2000);
});
}
}
});
});
</script>
<style>
#section1 img {
margin: 20px 0;
opacity: 0.7;
}
/* colors
* --------------------------------------- */
#colors2,
#colors3 {
position: absolute;
height: 163px;
width: 362px;
z-index: 1;
background-repeat: no-repeat;
left: 0;
margin: 0 auto;
right: 0;
}
#colors2 {
background-image: url(imgs/colors2.gif);
top: 0;
}
#colors3 {
background-image: url(imgs/colors3.gif);
bottom: 0;
}
/* Overwriting fullPage.js tooltip color
* --------------------------------------- */
#pp-nav.custom .pp-tooltip {
color: #AAA;
}
</style>
</head>
<body>
<ul id="menu">
<li data-menuanchor="page1" class="active">Page 1</li>
<li data-menuanchor="page2">Page 2</li>
<li data-menuanchor="page3">Page 3</li>
</ul>
<div id="pagepiling">
<div class="section" id="section1">
<!--img src="imgs/pagePiling-plugin.gif" alt="pagePiling" /-->
<div class="intro">
<div>
<div style="background:#F6303F;border-left: thick solid #F6303F; height:150px; width:8px; margin-left:42%;" id="block">
</div>
<h1 style="color: white;">DIGITAL</h1>
<p style="color: white;">CREATIVE AGENCY</p>
</div>
</div>
</div>
<div class="section">
<div class="intro">
<h1>Simple to use</h1>
<p>Just use the option direction: 'horizontal' to have it working!</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Isn't it great?</h1>
<p>Just as you expected!</p>
<div id="colors2"></div>
<div id="colors3"></div>
</div>
</div>
</div>
</body>
</html>
I think pagepiling.js might be the wrong direction because it just animates on one page, rather than animating between two pages.
The way I've handled stuff like this in the past is with a PJAX plugin like Barba.JS, which allows you to add animated transitions between site navigation events. Barba hijacks the page change by changing the URL manually, grabbing new content for the new page, and performing a transition (in which you can animate elements like Cuberto does!) between the old and new pages.
Let me know if this is helpful, or if I missed the point, and I'll try to update my answer accordingly!
EDIT: Just realized this is a seven-month old question, but hopefully this is helpful to someone nonetheless!
Below is my scenario explanation in screenshot,
From the above mentioned picture.Brown box positions are defined as droppable and the below choices are draggable.If I drag drop it is working fine.
If I drag another option in already defined place its overlapping for example
What I want to do is it will replace text as "venerated" and already dropped text "supercious" will come back to the text of choices in below box.How can I do this .Please anyone help me to get out of this issue.
Below is my code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</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>
.box1
{
background: #E7AC9F;
height: 20px;
width: 100px;
display: inline-block;
font-size: 16px;
margin-left: 10px;
margin-right: 10px;
}
.di1{
border: 1px dotted #22BAA0;
margin: 10px;
padding: 10px;
width: 100px;
border-radius: 4px;
font-size: 14px;
cursor: move;
list-style: none;
display: inline-block;
}
</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() {
$(".box1").sortable();
$(".box1").disableSelection();
$(".qitem2").draggable({
containment : "#container",
helper : 'clone',
revert : 'invalid'
});
$(".box1, #qlist2").droppable({
hoverClass : 'ui-state-highlight',
accept: ":not(.ui-sortable-helper)",
drop : function(ev, ui) {
$(ui.draggable).clone().appendTo(this);
$(ui.draggable).remove();
$(ui.draggable).removeAttr("style");
}
});
});
</script>
</head>
<body>
<p>The multi-coloured eyes,<div class="box1"></div>and striking facial cuts and curves<div class="box1"></div> the Siberian Husky as one of the most desirable and breeds <div class="box1"></div>of dogs. Originally from Siberia, they look like replicas of wolves; also, they are challenging to new owners due to their agility and<div class="box1"></div></p>
<div id="qlist2">
<div class="qitem2 di1">
Option 1
</div>
<div class="qitem2 di1">
Option 2
</div>
<div class="qitem2 di1">
Option 3
</div>
<div class="qitem2 di1">
Option 4
</div>
<div class="qitem2 di1">
Option 5
</div>
<div class="qitem2 di1">
Option 6
</div>
<div class="qitem2 di1">
Option 6
</div>
</div>
</body>
</html>
Just make an container for draggables elements so that whenever second element is dropped in droppable we can move first element in it's container
HTML :
<div id="qlist2">
<div id = "dragitem1-container" class="drag-container">
<div id="dragitem1" class="qitem2 di1">
Option 1
</div>
</div>
<div id = "dragitem2-container" class="drag-container">
<div id="dragitem2" class="qitem2 di1">
Option 2
</div>
</div>
<div id = "dragitem3-container" class="drag-container">
<div id="dragitem3" class="qitem2 di1">
Option 3
</div>
</div>
</div>
<div class="droppable-element">
</div>
JS:
$(document).ready(function() {
function makedraggable() {
$(".qitem2").draggable({
"revert": "invalid"
});
}
makedraggable();
$(".droppable-element").droppable({
"accept": ".qitem2",
"drop": function(event, ui) {
if ($(this).find(".qitem2").length) {
var $presentChild = $(this).find(".qitem2"),
currChildId = $presentChild.attr("id"),
$currChildContainer = $("#" + currChildId + "-container");
$currChildContainer.append($presentChild);
$presentChild.removeAttr("style");
makedraggable();
}
$(ui.draggable).clone().appendTo(this).removeAttr("style");
$(ui.draggable).remove();
}
})
})
I think this is what you want
https://jsfiddle.net/4bL4tfrt/
I have a drag and drop feature for my mobile game. Here it is:
https://jsfiddle.net/elchininet/otw3pw13/4/
Unfortunately, I have no idea what's going wrong inside my actual source code.
I think it might be because of all of the libraries I have? I'm new to app making and JavaScript. Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset = "utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="popup" id="myPopup2" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15 ">
Close<img src="http://s1.postimg.org/ljwm4953z/Screen_Shot_2015_12_12_at_10_45_52_PM.png" alt="Photo portrait">
</div>
<div data-role="main" class="ui-content">
<div data-role="header" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button onclick="location.reload(true)" class ="ui-btn-b">New Pizzas!</button></li>
<li>How To Play</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<div id="slices">
</div>
<div id="options">
<div data-index="1">1</div>
<div data-index="2">2</div>
<div data-index="3">3</div>
<div data-index="4">4</div>
<div data-index="5">5</div>
<div data-index="6">6</div>
<div data-index="7">7</div>
<div data-index="8">8</div>
</div>
<div id="area">
drop area
</div>
<p><img src="http://s24.postimg.org/j2ynvi0s1/Plus_Orange1.png;"></p>
</div>
</div>
</body>
</html>
CSS
#options div{
background:#666;
color: #FFF;
display: inline-block !important;
height: 50px;
line-height: 50px;
text-align: center;
vertical-align: top;
width: 50px;
}
#slices img{
display: inline-block;
height: 30px;
}
#area{
background: #CCC;
border: 1px solid #666;
margin-top: 20px;
height: 200px;
width: 200px;
}
JavaScript
$( document ).on( "pagecreate", function() {
$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});
});
var slices = $("#slices");
var options = $("#options");
var area = $("#area");
var selected;
var result;
//---Array of images
var pizzas = [
{image: "http://s23.postimg.org/6yojml8vb/Pizza_One.png", value: 1},
{image: "http://s13.postimg.org/5d8zxnb2b/pizzatwo.png", value: 2},
{image: "http://s12.postimg.org/xfsxldqyx/pizzathree.png", value: 3},
{image: "http://s14.postimg.org/d6tdq0865/pizzafour.png", value: 4}
];
var total = pizzas.length;
//---Make boxes dragables
options.find("div").draggable();
//---When the boxes are dropped
area.droppable({
drop: function(event, ui){
console.log("yes");
if( Number( ui.draggable.attr("data-index") ) == result ){
alert("correct");
}else{
alert("incorrect");
}
}
});
//---Insert random pizza slices
function insertPizzas(){
selected = [];
result = 0;
//---Generate aleatory pieces
var rand
while(selected.length < 2){
//---Random value
rand = Math.floor( Math.random() * total );
//---Sum result
result += pizzas[rand].value;
selected.push( rand );
}
//---Clear the slices
slices.html("");
//---Add the new slices
selected.forEach(function(number){
var img = $("<img/>");
img.attr("src", pizzas[number].image);
slices.append(img);
});
}
insertPizzas();
By your comments I see that you are testing your project locally. Use a local server to test your project. Do not open the HTML directly in your browser from the filesystem. Try with Xampp or Wampp.
By the other hand, put the jQuery code inside a document ready event.
$(document).on("ready", function(){
//--- Put the jQuery code here
}
Here you have your code (with the document ready event) running from an web server:
I'm having a problem with jQuery UI draggable..
I with to scroll an element within a smaller parent element, so that it creates a kind of viewport.
However, I'm having an issue with the element being dragged as it's snapping to the edges of the port.
Been battling with this for a while now so could really use some help... please :)
Here is an example of the behaviour I'm trying to get : LINK
Here is a jsFiddle : LINK
and sample code:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!-- CSS -->
<style type="text/css">
#port{
width:50px;
height:100px;
border:1px solid red;
overflow:hidden;
}
#obj {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
border-radius: 10px;
text-align: center;
background-color: lightpink;
}
</style>
<!-- Javascript -->
<script>
$(function ()
{
$("#obj").draggable(
{
containment: "#port",
scroll: false,
axis: 'x'
});
});
</script>
<!-- HTML -->
<div id="port">
<div id="obj">
<p>Drag me</p>
</div>
</div>
DEMO
Hope this is what you need, since you specified axis:x , it will move only in x axis
$(function () {
$("#obj").draggable({
scroll: false,
axis: 'x',
});
});
Here is the solution.
<div id="port">
<div id="obj">
<p>This is my new paragraph</p>
</div>
</div>
$(function() {
$( "#obj" ).draggable();
});
Link: http://jsfiddle.net/3HVT5/
It works when you remove the containment: "#port" line in your original code.
DEMO
I guess this is what you need
$(function () {
$("#obj").draggable({
containment: 'parent',
axis: 'x',
drag: function (event, ui) {
var p = ui.helper.position();
$(this).stop().animate({
right: p.right,
left: p.left
}, 400, 'linear');
}
});
});
Found 'a' solution here, but not sure of it's elegance...
<div id="outer"> <!-- position: relative -->
<div id="inner"> <!-- position: absolute -->
<img id="img_1" src="http://media02.hongkiat.com/nature-photography/red-planet.jpg" width="300" height="100" />
</div>
</div>
$(function()
{
var img = $("#img_1").draggable(
{
containment: '#inner',
axis: 'x'
}),
h = img.height(),
w = img.width(),
outer = $('#outer'),
oH = outer.height(),
oW = outer.width(),
iH = h + (h - oH),
iW = w + (w - oW),
iT = '-' + ((iH - oH)/2) + 'px',
iL = '-' + ((iW - oW)/2) + 'px';
$('#inner').css({ width: iW, height: iH, top: iT, left: iL });
})
However, tried it out and it does exactly what I'm after. So failing anything better I will go with this. Here is a fiddle link for you guys to try it out.
Thanks for your help...