I am trying to use the jquery jscrollpane plugin http://jscrollpane.kelvinluck.com/ in my website. I followed the instructions, but the scroll bar does nothing. I am probably overlooking something simple, but I have been trying for hours and cant figure out what I am doing wrong. I included the following in the header:
<link type="text/css" rel="stylesheet" href="CSS/style.css">
<link type="text/css" rel="stylesheet" href="CSS/jscrollpane.css">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Amaranth">
<script src="script/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="script/jquery.jscrollpane.js" type="text/javascript"></script>
<script src="script/jquery.mousewheel.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(document).ready(function() {
var element = $('.scroll-pane').jScrollPane({
showArrows: true,
verticalDragMaxHeight: 16,
horizontalDragMaxWidth: 0,
contentWidth: '0px'
});
var api = element.data('jsp');
api.reinitialise();
});
});
</script>
The following CSS:
.scroll-pane {
width: 100%;
height: 100%;
overflow: auto;
margin-bottom: 8px;
}
.jspContainer {
overflow: hidden;
position: relative;
}
.jspPane {
position: absolute;
}
.jspVerticalBar {
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 100%;
}
.jspCap {
display: none;
}
.jspHorizontalBar .jspCap {
float: left;
}
.jspTrack {
background: url(../images/scroll_bar.png);
position: relative;
}
.jspDrag {
background: url(../images/scroll_drag.png) no-repeat;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspArrow {
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}
.jspArrowUp {
width: 12px;
height: 14px;
background-image: url(../images/scroll_up.png);
}
.jspArrowDown {
background-image: url(../images/scroll_down.png);
}
.jspArrow.jspDisabled {
cursor: default;
}
.jspVerticalBar .jspArrow {
height: 14px;
}
.jspVerticalBar .jspArrow:focus {
outline: none;
}
.jspCorner {
background: #eeeef4;
float: left;
height: 100%;
}
And this is my HTML:
<div class="daily_special">
<div class="pane">
<div class="scroll-pane jspScrollable" style="overflow: hidden; padding: 0px; width: 240px;" tabindex="0">
<div class="jspContainer" style="width: 240px; height: 220px;">
<div class="jspPane" style="padding: 0px; top: 0px; width: 224px;">
<div style=" width: 210px;">
<h3>Weekly Specials</h3>
<a><img src="images/weekly_special_home.jpg"></a>
Today is the day we release our Spring/Summer menu!! Come down to FSB and try some of our delicious new additions! Cheers!
<span> </span>
</div>
</div>
<div class="jspVerticalBar">
<div class="jspCap jspCapTop"></div>
<a class="jspArrow jspArrowUp jspDisabled"></a>
<div class="jspTrack" style="height: 192px;">
<div class="jspDrag" style="height: 16px; top: 0px;">
<div class="jspDragTop"></div>
<div class="jspDragBottom"></div>
</div>
</div>
<a class="jspArrow jspArrowDown"></a>
<div class="jspCap jspCapBottom"></div>
</div>
</div>
</div>
> view our full MENU </div>
</div>
I would greatly appreciate any suggestions.
Related
I have a sprite image containing 4 different pictures. They are 520px in height. I would like animate them sliding from the first picture to the last picture. I am able to get them to flip through images, however I cannot get them to slide smoothly. Also, when the last image is reached, I need to slide back to the first image. I am unsure how to do this, this is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<div id="leftArrow"</div>
<div id="rightArrow"></div>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","+=792px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-=792px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/`enter code here`
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;
All,
I want to have a JS script in which when you scroll down the header ("Banner") of the website gets another colour. (Change from transaparant to a colour). (In the future i want it to change from an image to another image.. ).
i added a JS script from this website but it does not work yet. I think i need to know which div i need to use for the scrollbar.
Can anybode help with this?
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 20) {
(".banner" , 'background-color', 'blue');
} else {
(".banner" , 'background-color', 'red');
}
});
});
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
color: #333955;
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
}
.menutekst {
text-align: center;
font-size: 2vw;
color: #333955;
top: 20px;
position: fixed;
word-spacing: 1em;
}
.koopnubutton{
position: fixed;
background : #333955;
background : rgba(51, 57, 85, 1);
border-radius : 16px;
-moz-border-radius : 16px;
-webkit-border-radius : 16px;
;
color: #FFFFFF;
width: 200px;
}
.firstdiv {
position: relative;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
}
.eettellus {
position: absolute;
bottom: 30%;
width: auto;
left: 20%;
font-family: "Garisman Studio FreudianTwo";
color: #FDFDFD;
font-size: 3.5vw;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
</html>
You should change the background-color in css and also name the class in jquery proper:
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 20) {
$(".banner").css("backgroundColor", "red");
} else {
$(".banner").css("backgroundColor", "rgba(100,100,100,0.5)");
}
});
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
background-color: rgba(100,100,100,0.5);
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
}
.menutekst {
text-align: center;
font-size: 2vw;
top: 20px;
word-spacing: 1em;
}
.koopnubutton{
position: fixed;
background : #333955;
background : rgba(51, 57, 85, 1);
border-radius : 16px;
-moz-border-radius : 16px;
-webkit-border-radius : 16px;
;
color: #FFFFFF;
width: 200px;
}
.firstdiv {
position: relative;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
}
.eettellus {
position: absolute;
bottom: 30%;
width: auto;
left: 20%;
font-family: "Garisman Studio FreudianTwo";
color: #FDFDFD;
font-size: 3.5vw;
}
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
You just need to measure the height of your banner in order to know where you need to switch the color:
$(document).scroll(function() {
var scroll_pos = $(this).scrollTop();
if (scroll_pos > $(".banner").height()) {
$(".banner").css("background-color", "blue");
} else {
$(".banner").css("background-color", "red");
}
});
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
color: #333955;
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
background-color: red;
}
body {
height: 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
Use a native javascript in your html code :
<div class="banner" onscroll="myScript" ></div>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onscroll="myScript"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
</html>
and in your javascript
window.onscroll = function() {myScript()};
function myScript() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("banner").css('background-color', 'blue');
} else {
document.getElementById("banner").css('background-color', 'red');
}
}
I hope this answer will help you.
I have a jquery function that allows an element to be draggable and resizeable and it works fine. What I wanted to add to it was to set a location in which the element can be draggable and resizable at. To be more specific I wanted to make my element draggable between the space in 2 lines (v1 and vh) in my code. Is there any way to achieve this? Any help is appreciated. Thanks in advance.
$(".box").mouseup(function () {
$(this).find('iframe').fadeIn('slow');
}).mousedown(function () {
$(this).find('iframe').hide();
});
$(function () {
$(".box")
.resizable()
.draggable();
});
.box {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
height: 30%;
background-color: #2b2d2f;
color: black;
position: absolute;
top: 1%;
}
.box h4{
color: white;
font-size: 20px;
text-align:center;
}
.vl {
height: 100%;
position: absolute;
right: 5%;
top: 0;
background-color: red;
width: 2.5px;
height: 100%;
overflow: hidden;
}
.vh {
width: 100%;
position: absolute;
top: 75%;
background-color: red;
height: 2.5px;
width: 100%;
overflow: hidden;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
</head>
<body>
<div class="box">
<h4>box</h4>
</div>
<div class="vl">
</div>
<div class="vh">
</div>
</body>
</html>
The draggable() jQueryUI component has a containment parameter. One of its signatures allows you to provide 4 co-ordinates which equate to the bounding box the draggable element should be restricted to.
To calculate this you can retrieve the left and top of the vertical and horizontal lines respectively, subtracting the width/height of the .box. Try this:
jQuery($ => {
let $box = $('.box');
let $vl = $('.vl');
let $vh = $('.vh');
$box
.resizable()
.draggable({
containment: [
8, // default body padding, amend as necessary
8, // default body padding, amend as necessary
Math.ceil(parseFloat($vl.css('left'))) - Math.floor(parseFloat($box.width())),
Math.ceil(parseFloat($vh.css('top'))) - Math.floor(parseFloat($box.height()))
]
});
});
.box {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
height: 30%;
background-color: #2b2d2f;
color: black;
position: absolute;
top: 1%;
}
.box h4 {
color: white;
font-size: 20px;
text-align: center;
}
.vl {
height: 100%;
position: absolute;
right: 5%;
top: 0;
background-color: red;
width: 2.5px;
height: 90%;
overflow: hidden;
}
.vh {
position: absolute;
top: 75%;
background-color: red;
height: 2.5px;
width: 95%;
overflow: hidden;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<div class="box">
<h4>box</h4>
</div>
<div class="vl"></div>
<div class="vh"></div>
One approach is wrap the box in a container that fits within the area you want and use containment: "parent"
function getContainerDimensions() {
const buffer = 6 // used in demo to prevent borders overlap
return {
width: $('.vl').offset().left - buffer,
height: $('.vh').offset().top - buffer
}
}
$(function() {
const $cont = $('<div id="container">').css(getContainerDimensions())
$(".box").wrap($cont)
.resizable({containment: "parent"})
.draggable({containment: "parent"});
});
body {
padding: 0;
margin: 0
}
#container {
border: 2px solid green
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
height: 30%;
background-color: #2b2d2f;
color: black;
position: absolute;
top: 1%;
}
.box h4 {
color: white;
font-size: 20px;
text-align: center;
}
.vl {
height: 100%;
position: absolute;
right: 5%;
top: 0;
background-color: red;
width: 2.5px;
height: 100%;
overflow: hidden;
}
.vh {
width: 100%;
position: absolute;
top: 75%;
background-color: red;
height: 2.5px;
width: 100%;
overflow: hidden;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
</head>
<body>
<div class="box">
<h4>box</h4>
</div>
<div class="vl">
</div>
<div class="vh">
</div>
</body>
</html>
I'm practising with JavaScript and hiding the image and the button. The footer keeps coming to the top of the page every time I execute the command. How can I correct this? I've tried many different options and I can't seem to get it to work right like position: sticky, bottom:0; for example.
I'm extremely new to this coding thing so I'm pretty sure I have no idea what I'm doing.
jQuery(document).ready(function() {
$(".myButton").click(function(){
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function(){
$(".poem").hide();
$(".resize").hide();
})
})
#charset "utf-8";
/* CSS Document */
.main-image {
display: block;
width: 25%;
margin-bottom: 30px;
}
.container {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
}
.overlay-content {
position: absolute;
bottom: 15%;
text-align: center;
width: 25%;
}
.resize {
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
footer {
background-color: brown;
border: solid;
position: sticky;
bottom: 0;
}
.myButton {
margin-left: 50%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>practice_overlay</title>
<link href="Overlay.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script_storage.js"></script>
</head>
<body>
<div class="container">
<p class="introduction">Lorem Ispum</p>
<img class="main-image" src="Devry Web Design Intro Course/Pictures/crystal-tear-3.jpg">
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
<footer>Lorem Ispum</footer>
</body>
</html>
You could use CSS grid - with the setup in the snippet below, you can "safely" work inside the div.outer part of the layout, without making the other parts of your page "jumping around" :)
jQuery(document).ready(function() {
$(".myButton").click(function() {
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function() {
$(".poem").hide();
$(".resize").hide();
})
})
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
display: grid;
grid-template-rows: calc(100vh - 30px) 30px;
grid-template-columns: 100%;
}
.outer {
background: gray;
padding: 8px 16px;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.container {}
#image {
height: 30px;
width: 30px;
}
.myButton {
margin: 0 auto;
}
footer {
background-color: brown;
padding: 8px 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<div class="outer">
<div class="container">
<p class="introduction">Introduction</p>
<img id="image" src="https://picsum.photos/30" alt="small image" />
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
</div>
<footer>
footer
</footer>
</div>
i am intermediate jquery experience, so i need help here with an awesome interface Demo:
Demo
But i don't know why it isn't drag to other div's with same id's "#drophere". please make it work just like Windows Taskbar. Thanks
$( function() {
$( "#dragme" ).draggable({
appendTo: 'body',
containment: '#drophere'
});
} );
body {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#dragme {
position: absolute;
background: rgba(0, 100, 200, 0.6);
width: 100%;
height: 50px;
left: 0;
bottom: 0;
text-align: center;
font-size: 36px;
z-index: 999;
}
#drophere {
position: absolute;
background: rgba(200, 100, 0, 0.1);
text-align: center;
}
.top {top:0;width: 100%;height: 50px;}
.left {left:0;width: 50px;height: 100%;}
.bottom {bottom:0;width: 100%;height: 50px;}
.right {right:0;width: 50px;height: 100%;}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<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 id="dragme">Drag me</div>
<div id="drophere" class="top">Drop it Here</div>
<div id="drophere" class="left" style="padding-top:200px;">Drop it Here & stand it like me</div>
<div id="drophere" class="bottom">Drop it Here</div>
<div id="drophere" class="right" style="padding-top:200px;">Drop it Here & stand it like me</div>
Like Michael mentioned, id's must be unique, you'll want to use classes instead.
Also, IMHO, I'd use .sortable() for this "snap to and fill" type behaviour, not draggable(). You could do it with draggable() with a bit of configuring, but sortable will work with minimal effort.
Here is a working example and a jsfiddle
$(function() {
$(".drophere").sortable({
connectWith: ".drophere"
}).disableSelection();
});
body {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#dragme {
list-style-type: none;
position: absolute;
background: rgba(0, 100, 200, 0.6);
width: 100%;
height: 50px;
left: 0;
bottom: 0;
text-align: center;
font-size: 36px;
z-index: 999;
}
.left #dragme, .right #dragme{
height: 100%;
}
.drophere {
position: absolute;
background: rgba(200, 100, 0, 0.1);
text-align: center;
margin:0;
}
.top {
top: 0;
width: 100%;
height: 50px;
}
.left {
left: 0;
width: 50px;
height: 100%;
}
.bottom {
bottom: 0;
width: 100%;
height: 50px;
}
.right {
right: 0;
width: 50px;
height: 100%;
}
<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>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<ul class="top drophere">
<li id="dragme">Drag me</li>
</ul>
<ul class="left drophere" style="padding-top:200px;"></ul>
<ul class="bottom drophere"></ul>
<ul class="right drophere" style="padding-top:200px;"></ul>