I've been trying to get my drag and drop to work, can't figure out what's wrong with it.
I basically can't drop the images to the body image.
I tried JSLint/JSHint to clean my code but that didn't help me get it to work.
Can someone please help me?
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<style>
div#OuterDiv {
border: 1px solid black;
position: relative;
width: 1000px;
height: 1000px;
background-color: gray;
color: white;
font: times new roman;
}
</style>
</head>
<body>
<script language="text/javascript">
'use strict';
var ie4 = ua.indexOf("MSIE 4.0");
var curElement;
window.onload = opening;
document.ondragstart = doDragStart;
document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
document.onmouseup = new Function("curElement=null");
function opening() {
if (ie4Final) {
if (body.style.display === "none") {
OuterDiv.filters[0].Apply();
body.style.display = "";
OuterDiv.filters[0].Play();
}
} else {
if (betaVer >= 2) {
body.style.display = "";
}
}
}
function doMouseMove() {
var newleft = 0,
newTop = 0;
if ((event.button === 1) && (curElement !== null)) {
newleft = window.event.x - tx;
if (newleft < 0) {
newleft = 0;
if (newleft + curElement.width > document.all.OuterDiv.offsetWidth) newleft = document.all.OuterDiv.offsetWidth - curElement.offsetWidth;
curElement.style.pixelLeft = newleft;
newtop = event.clientY - document.all.OuterDiv.offsetTop - (curElement.offsetHeight / 2);
if (newtop < 0) {
newtop = 0;
if (newtop + curElement.height > document.all.OuterDiv.offsetHeight) newtop = window.event.y - ty;
curElement.style.pixelTop = newtop;
event.returnValue = false;
event.cancelBubble = true;
}
}
function doDragStart() {
if ("IMG" === event.srcElement.tagName) {
event.returnValue = false;
}
}
function doMouseDown() {
if ((event.button === 1) && (event.srcElement.tagName === "img")) {
tx = window.event.x - event.srcElement.style.pixelLeft;
ty = window.event.y - event.srcElement.style.pixelTop;
curElement = event.srcElement;
}
}
</script>
<script FOR="body" event="onMouseDown">
event.cancelBubble = true;
</script>
<div id="OuterDiv">
<h1><Center>Drag and Drop - potato head</center></h1>
<img ID="body" style="position:absolute;left:10;top:190;z-index:19;" src="BODY.GIF" />
<img ID="ear1" style="position:absolute;left:60;top:70;z-index:19;" src="EAR1.GIF" />
<img ID="ear2" style="position:absolute;left120;top:70;z-index:19;" src="EAR2.GIF">
<img ID="glasses4" style="position:absolute;left:120;top:70;z-index:19;" src="GLASSES4.GIF" />
<img ID="mouth1" style="position:absolute;left:290;top:70;z-index:19;" src="MOUTH1.GIF" />
<img ID="nose1" style="position:absolute;left:450;top:70;z-index:19;" src="NOSE1.GIF" />
<img ID="eyes4" style="position:absolute;left:510;top:70;z-index:19;" src="EYES4.GIF" />
</div>
</body>
</html>
You may try next code:
function ondrop(ev){
var FieldClone=document.getElementByID("textField").clone(true);
ev.target.appendChild(FieldClone);
}
<input type="text" id="textField" value="Drop me" name="" draggable="true">
<div id="sec_drop" ondrop="drop(event)"style="width: 500px;height: 370px;"ondragover="allowDrop(event)">
</div>
Related
I want a fixed element #logoimode3 to hide/show when some sections scroll into view vertically.
For example:
Show #logoimode3 when #section1 and #section3 scroll into view
Hide #logoimode3 when #section2 scrolls into view
So the fixed element should disappear when the blue section scrolls into view. And then show again when the green section scrolls into view.
I want my logo to disappear while scrolling through #section2.
What am I doing wrong?
Here is my HTML code:
<img id="logoimode3" class="logo3" style="position:fixed;top:0px;left:0px;" src="https://imode.info/imode/slike/ikone/IMODE_znak-01.svg" alt="logo" height="" width="30px">
<section id="section1" style="background: red; height:100vh;"></section>
<section id="section2" style="background: blue; height:100vh;"></section>
<section id="section3" style="background: green; height:100vh;"></section>
<footer></footer>
Here is my JavaScript code:
jQuery(document).ready(function($) {
$('#logoimode4').css({
'display': 'none'
});
$(function() {
var $window = $(window);
var logo = $('#logoimode4');
var div1 = $('#section1stran');
var div2 = $('#section2stran');
var div3 = $('#section3stran');
var div4 = $('#section4stran');
var div5b = $('#section5bstran');
var div1_height = div1.height();
var div2_height = div2.height();
var div3_height = div3.height();
var div4_height = div4.height();
var div5b_height = div5b.height();
$window.on('scroll', function() {
var scrollTop = document.documentElement.scrollTop;
var viewport_height = $window.height();
var scrollTop_bottom = scrollTop + viewport_height;
// if (scrollTop >= 0 && (scrollTop_bottom <= div1_height * 1.9 )) {
// logo.css({'display' : 'none'});
// }
if (scrollTop >= div1_height * 0 + div1_height * 1 + div2_height + div3_height + div4_height + div5b_height && (scrollTop_bottom <= div1_height * 5 + div1_height + div2_height + div3_height + div4_height + div5b_height)) {
logo.css({
'display': 'block'
});
} else {
logo.css({
'display': 'none'
});
}
// Work with Class
/* if (scrollTop > div1_height && (scrollTop_bottom <= div1_height * 3)) {
logo.addClass('hidden');
} else {
logo.removeClass('hidden');
} */
});
});
});
get height of section and when the top of section hits 0 it hides and when the bottom of section hits 0 it shows again
<!DOCTYPE html>
<html>
<head>
<style></style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
jQuery(document).ready(function() {
var sec2 = document.getElementById("section2");
var pos = sec2.getBoundingClientRect();
var height1 = pos.height * -1;
if (pos.top < 1 && pos.top > height1) {
jQuery('#logoimode3').hide();
}
else if(pos.top < height1 || pos.top > 1) {
jQuery('#logoimode3').show();
}
});
jQuery(window).scroll(function() {
var sec2 = document.getElementById("section2");
var pos = sec2.getBoundingClientRect();
var height1 = pos.height * -1;
if (pos.top < 1 && pos.top > height1) {
jQuery('#logoimode3').hide();
}
else if(pos.top < height1 || pos.top > 1) {
jQuery('#logoimode3').show();
}
});
</script>
</head>
<body>
<img id="logoimode3" class="logo3" style="position:fixed;top:0px;left:0px;" src="https://imode.info/imode/slike/ikone/IMODE_znak-01.svg" alt="logo" height="" width="30px">
<section id="section1" style="background: red; height:100vh;"></section>
<section id="section2" style="background: blue; height:100vh;"></section>
<section id="section3" style="background: green; height:100vh;"></section>
<section id="section4" style="background: pink; height:100vh;"></section>
</body>
<footer></footer>
</html>
There is what you need with the full code:
$(function() {
var $window = $(window);
var logo = $('#logoimode3');
var div1 = $('#section1');
var div1_height = div1.height();
$window.scroll(function() {
var scrollTop = $(window).scrollTop();
var viewport_height = $window.height();
var scrollTop_bottom = scrollTop + viewport_height;
if (scrollTop > div1_height && (scrollTop_bottom <= div1_height * 3)) {
logo.css({
'display': 'none'
});
} else {
logo.css({
'display': 'block'
});
}
// Work with Class
/* if (scrollTop > div1_height && (scrollTop_bottom <= div1_height * 3)) {
logo.addClass('hidden');
}
else {
logo.removeClass('hidden');
} */
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="logoimode3" class="logo3" style="position:fixed;top:0px;left:0px;" src="https://imode.info/imode/slike/ikone/IMODE_znak-01.svg" alt="logo" height="" width="30px">
<section id="section1" style="background: red; height:100vh;"></section>
<section id="section2" style="background: blue; height:100vh;"></section>
<section id="section3" style="background: green; height:100vh;"></section>
Task:
I created a shape with 4 buttons, and need it to move to 4 directions depending on the button clicked (pure JS).
This is what I created - check out the snippet.
Problem:
Left/Right directions work great, but Up/Down do not.
Any idea why? Looks like both directions are identical. :/
Thanks a lot for your help, much appreciated!
var shape = document.getElementById("shape"),
leftBtn = document.getElementById("leftBtn"),
rightBtn = document.getElementById("rightBtn"),
upBtn = document.getElementById("upBtn"),
downBtn = document.getElementById("downBtn");
leftBtn.onclick = function(){
moveLeft();
}
rightBtn.onclick = function(){
moveRight();
}
upBtn.onclick = function(){
moveUp();
}
downBtn.onclick = function(){
moveDown();
}
function moveLeft() {
var val = (parseInt(shape.style.left) || 0) - 50;
shape.style.left = val + "px";
}
function moveUp() {
var val = (parseInt(shape.style.top) || 0) - 50;
shape.style.left = val + "px";
}
function moveRight() {
var val = (parseInt(shape.style.left) || 0) + 50;
shape.style.left = val + "px";
}
function moveDown() {
var val = (parseInt(shape.style.top) || 0) + 50;
shape.style.left = val + "px";
}
body{
background-color: black;
}
#shape{
background-color: red;
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
}
<html>
<head>
<title>JavaScript and the Document Object Model</title>
<link rel="stylesheet" type="text/css" href="shape.css">
</head>
<body>
<div id="container">
<div id="shape">
</div>
<div id="buttons">
<button class="button" id="leftBtn" direction="left">left</button>
<button class="button" id="upBtn" direction="up">up</button>
<button class="button" id="downBtn" direction="down">down</button>
<button class="button" id="rightBtn" direction="right">right</button>
</div>
</div>
<script type="text/javascript" src="shape.js"></script>
</body>
</html>
As pointed by #Temani, in functions moveUp and moveDown, changing shape.style.left to shape.style.top will solve the problem.
var shape = document.getElementById("shape"),
leftBtn = document.getElementById("leftBtn"),
rightBtn = document.getElementById("rightBtn"),
upBtn = document.getElementById("upBtn"),
downBtn = document.getElementById("downBtn");
leftBtn.onclick = function(){
moveLeft();
}
rightBtn.onclick = function(){
moveRight();
}
upBtn.onclick = function(){
moveUp();
}
downBtn.onclick = function(){
moveDown();
}
function moveLeft() {
var val = (parseInt(shape.style.left) || 0) - 50;
shape.style.left = val + "px";
}
function moveUp() {
var val = (parseInt(shape.style.top) || 0) - 50;
shape.style.top = val + "px";
}
function moveRight() {
var val = (parseInt(shape.style.left) || 0) + 50;
shape.style.left = val + "px";
}
function moveDown() {
var val = (parseInt(shape.style.top) || 0) + 50;
shape.style.top = val + "px";
}
body{
background-color: black;
}
#shape{
background-color: red;
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
}
<html>
<head>
<title>JavaScript and the Document Object Model</title>
<link rel="stylesheet" type="text/css" href="shape.css">
</head>
<body>
<div id="container">
<div id="shape">
</div>
<div id="buttons">
<button class="button" id="leftBtn" direction="left">left</button>
<button class="button" id="upBtn" direction="up">up</button>
<button class="button" id="downBtn" direction="down">down</button>
<button class="button" id="rightBtn" direction="right">right</button>
</div>
</div>
<script type="text/javascript" src="shape.js"></script>
</body>
</html>
I need some help with this code. I want to create an event click button for previous. How can I do this using a little code? some thing similar to my Next button click event.
Here is my full code.
$(document).ready(function() {
var nextSlide = $("#slides img:first-child");
var nextCaption;
var nextSlideSource;
var counter = 0;
// the function for running the slide show
var runSlideShow = function() {
$("#caption").fadeOut(1000);
$("#slide").fadeOut(1000,
function () {
if (nextSlide.next().length === 0) {
nextSlide = $("#slides img:first-child");
}
else {
nextSlide = nextSlide.next();
}
nextSlideSource = nextSlide.attr("src");
nextCaption = nextSlide.attr("alt");
$("#slide").attr("src", nextSlideSource).fadeIn(1000);
$("#caption").text(nextCaption).fadeIn(1000);
}
);
};
// start the slide show
var timer = setInterval(runSlideShow, 3000);
$("#play").on("click", function() {
if($(this).val() === "Pause") {
clearInterval(timer);
$(this).val("Play");
$("#prev").prop("disabled", false);
$("#next").prop("disabled", false);
}
else if ($(this).val() === "Play") {
timer = setInterval(runSlideShow, 3000);
$(this).val("Pause");
$("#prev").prop("disabled", true);
$("#next").prop("disabled", true);
}
});
var imag = $("#slides img").index();
var imageSize = $("#slides img").length - 1;
$("#next").on("click", function (e) {
e.preventDefault();
if (imag === imageSize) {
$("#next").prop("disabled", true);
}
else {
++imag;
runSlideShow(1);
}
});
});
body {
font-family: Arial, Helvetica, sans-serif;
width: 380px;
height: 350px;
margin: 0 auto;
padding: 20px;
border: 3px solid blue;
}
h1, h2, ul, p {
margin: 0;
padding: 0;
}
h1 {
padding-bottom: .25em;
color: blue;
}
h2 {
font-size: 120%;
padding: .5em 0;
}
img {
height: 250px;
}
#slides img {
display: none;
}
#buttons {
margin-top: .5em;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slide Show</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slide_show.js"></script>
</head>
<body>
<section>
<h1>Fishing Slide Show</h1>
<h2 id="caption">Casting on the Upper Kings</h2>
<img id="slide" src="images/casting1.jpg" alt="">
<div id="slides">
<img src="images/casting1.jpg" alt="Casting on the Upper Kings">
<img src="images/casting2.jpg" alt="Casting on the Lower Kings">
<img src="images/catchrelease.jpg" alt="Catch and Release on the Big Horn">
<img src="images/fish.jpg" alt="Catching on the South Fork">
<img src="images/lures.jpg" alt="The Lures for Catching">
</div>
<div id="buttons">
<input type="button" id="prev" value="Previous" disabled>
<input type="button" id="play" value="Pause">
<input type="button" id="next" value="Next" disabled>
</div>
</section>
</body>
</html>
I thought of during it this way, but that is not working.
$("#prev").on("click", function () {
if (imag === imageSize) {
$("#prev").prop("disabled", true);
}
else {
++imag;
runSlideShow(-1);
}
});
Something similar to this Next button click event.
$("#next").on("click", function (e) {
e.preventDefault();
if (imag === imageSize) {
$("#next").prop("disabled", true);
}
else {
++imag;
runSlideShow(1);
}
});
Any help please.
test my idea =)
var mySlide = function(){
var index = 0;
var timer = false;
var self = this;
self.data = [];
self.start = function(){
timer = setInterval(self.next, 3000);
return self;
};
self.stop = function(){
clearInterval(timer);
timer = false;
return self;
};
self.pause = function(){
if(timer == false){
self.start();
} else {
self.stop();
}
};
self.next = function(){
if(self.data.length > 0){
self.stop().start(); // reset the timer
index++;
self.update();
}
};
self.prev = function(){
if(self.data.length > 0 && index > 0){
self.stop().start(); // reset the timer
index--;
self.update();
}
};
self.update = function(){
var item = self.data[index % self.data.length]; // calculating the value of INDEX
$('.print').fadeOut(1000,function(){
$(this).html(item).fadeIn(1000);
});
};
}
// RUN CODE!
var test = new mySlide();
test.data = [ // LOAD ITEM!
'food',
'bar',
$('<img/>').attr('src','https://www.google.it/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png')
];
test.start().update(); // START!
$('.prev').click(test.prev); // add event!
$('.pause').click(test.pause);
$('.next').click(test.next);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="print"></div>
<input type="button" value="prev" class="prev">
<input type="button" value="pause" class="pause">
<input type="button" value="next" class="next">
I have a page where I want an image to appear after scrolling say 500px and I used the "If you want to show a div after scrolling a number of pixels, WITHOUT jquery" code snippet from apaul34208 (show div after 800px scroll). My adapted code is like this:
<!DOCTYPE html>
<html>
<body>
<div id="myID" class="pointer hide">
<img src="image.png">
</div>
<script>
myID = document.getElementById("myID");
var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 400) {
myID.className = "pointer show"
} else {
myID.className = "pointer hide"
}
};
window.addEventListener("scroll", myScrollFunc);
</script>
</body>
</html>
and CSS:
.hide {
display: none;
}
.show {
display: block;
margin-top: -80px;
}
Only problem is that I would also like it to DISAPPEAR again lets say 400 px from the bottom of the page. the page-height differs from page to page so I cant just set a range like underneath from say 400-1000 px.
<script>
myID = document.getElementById("myID");
var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 400 & y <= 1000 ) {
myID.className = "pointer show"
} else {
myID.className = "pointer hide"
}
};
window.addEventListener("scroll", myScrollFunc);
</script>
</body>
</html>
Anyone have any idea how I can make this happen?
Thanks guys!
$(document).ready(function() {
$(window).scroll(function() {
console.log('scrolling ', $(window).scrollTop(), $(document).height());
if ($(window).scrollTop() >= 400 && $(window).scrollTop() <= ($(document).height() - 600)) {
$('#myID').removeClass('hide');
}
else {
$('#myID').addClass('hide');
}
});
});
.hide {
display: none;
}
.body {
height: 2000px;
}
#myID {
background-color: lightgray;
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
<div id="myID" class="pointer hide">
STUFF HERE
</div>
</div>
use document.height to get the height of the document and rest the desired value:
myID = document.getElementById("myID");
var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 400 & y <= document.height - 400) {
myID.className = "pointer show";
} else {
myID.className = "pointer hide";
}
};
window.addEventListener("scroll", myScrollFunc);
I want to use drag & drop functionality for ibooks app of ipad using Javascript. Attached is the code that i have used in file, though it is working on browser but am not able to see it in ipad. It would be great if someone will help me with the same.
dfgdf
<style type="text/css" xml:space="preserve">
/* DEMO CSS */
body{
width:100%;
margin:0px;
padding:0px;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */
}
#heading{
height:100px;
}
/* END DEMO CSS */
#dragScriptContainer{ /* BIG div containing HTML needed for the entire script */
width:400px;
margin:0 auto;
border:1px solid #000;
height:400px;
margin-top:20px;
padding:3px;
-moz-user-select:no;
}
#questionDiv{ /* Big div for all the questions */
float:left;
height:100%;
width:100px;
border:1px solid #000;
padding:2px;
}
#answerDiv{ /* Big div for all the answers */
float:right;
height:100%;
width:50px;
border:1px solid #000;
padding:2px;
}
#questionDiv div,#answerDiv div,#dragContent div{ /* General rules for small divs - i.e. specific questions and answers */
width:45px;
height:20px;
line-height:20px;
float:left;
margin-right:2px;
margin-bottom:2px;
text-align:center;
}
#dragContent div{ /* Drag content div - i.e. specific answers when they are beeing dragged */
border:1px solid #000;
}
#answerDiv .dragDropSmallBox{ /* Small answer divs */
border:1px solid #000;
cursor:pointer;
}
#questionDiv .dragDropSmallBox{ /* Small answer divs */
border:1px solid #000;
cursor:pointer;
background-color:#E2EBED; /* Light blue background color */
}
#questionDiv div div{ /* div after it has been dragged from right to left box */
margin:0px;
border:0px;
padding:0px;
background-color:#FFF;
}
#questionDiv .destinationBox{ /* Small empty boxes for the questions - i.e. where answers could be dragged */
border:0px;
background-color:#DDD;
width:47px;
height:22px;
}
#questionDiv .correctAnswer{ /* CSS indicating correct answer */
background-color:green;
color:#fff;
border:1px solid #000;
}
#questionDiv .wrongAnswer{ /* CSS indicating wrong answer */
background-color:red;
color:#fff;
border:1px solid #000;
}
#dragContent div{
background-color:#FFF;
}
#questionDiv .dragContentOver{ /* Mouse over question boxes - i.e. indicating where dragged element will be appended if mouse button is relased */
border:1px solid #F00;
}
#answerDiv.dragContentOver{ /* Mouse over answer box - i.e. indicating where dragged element will be appended if mouse button is relased */
border:1px solid #F00;
}
/* NEVER CHANGE THIS */
#dragContent{
position:absolute;
display:none;
}
</style>
<script type="text/javascript">
//<![CDATA[
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var shuffleQuestions = true; /* Shuffle questions ? */
var shuffleAnswers = true; /* Shuffle answers ? */
var lockedAfterDrag = false; /* Lock items after they have been dragged, i.e. the user get's only one shot for the correct answer */
function quizIsFinished()
{
// This function is called when everything is solved
}
/* Don't change anything below here */
var dragContentDiv = false;
var dragContent = false;
var dragSource = false;
var dragDropTimer = -1;
var destinationObjArray = new Array();
var destination = false;
var dragSourceParent = false;
var dragSourceNextSibling = false;
var answerDiv;
var questionDiv;
var sourceObjectArray = new Array();
var arrayOfEmptyBoxes = new Array();
var arrayOfAnswers = new Array();
function getTopPos(inputObj)
{
if(!inputObj || !inputObj.offsetTop)return 0;
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
return returnValue;
}
function getLeftPos(inputObj)
{
if(!inputObj || !inputObj.offsetLeft)return 0;
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}
function cancelEvent()
{
return false;
}
function initDragDrop(e)
{
if(document.all)e = event;
if(lockedAfterDrag && this.parentNode.parentNode.id=='questionDiv')return;
dragContentDiv.style.left = e.clientX + Math.max(document.documentElement.scrollLeft,document.body.scrollLeft) + 'px';
dragContentDiv.style.top = e.clientY + Math.max(document.documentElement.scrollTop,document.body.scrollTop) + 'px';
dragSource = this;
dragSourceParent = this.parentNode;
dragSourceNextSibling = false;
if(this.nextSibling)dragSourceNextSibling = this.nextSibling;
if(!dragSourceNextSibling.tagName)dragSourceNextSibling = dragSourceNextSibling.nextSibling;
dragDropTimer=0;
timeoutBeforeDrag();
return false;
}
function timeoutBeforeDrag(){
if(dragDropTimer>=0 && dragDropTimer<10){
dragDropTimer = dragDropTimer +1;
setTimeout('timeoutBeforeDrag()',10);
return;
}
if(dragDropTimer>=10){
dragContentDiv.style.display='block';
dragContentDiv.innerHTML = '';
dragContentDiv.appendChild(dragSource);
}
}
function dragDropMove(e)
{
if(dragDropTimer<10){
return;
}
if(document.all)e = event;
var scrollTop = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
dragContentDiv.style.left = e.clientX + scrollLeft + 'px';
dragContentDiv.style.top = e.clientY + scrollTop + 'px';
var dragWidth = dragSource.offsetWidth;
var dragHeight = dragSource.offsetHeight;
var objFound = false;
var mouseX = e.clientX + scrollLeft;
var mouseY = e.clientY + scrollTop;
destination = false;
for(var no=0;no<destinationObjArray.length;no++){
var left = destinationObjArray[no]['left'];
var top = destinationObjArray[no]['top'];
var width = destinationObjArray[no]['width'];
var height = destinationObjArray[no]['height'];
destinationObjArray[no]['obj'].className = 'destinationBox';
var subs = destinationObjArray[no]['obj'].getElementsByTagName('div');
if(!objFound && subs.length==0){
if(mouseX < (left/1 + width/1) && (mouseX + dragWidth/1) >left && mouseY < (top/1 + height/1) && (mouseY + dragHeight/1) >top){
destinationObjArray[no]['obj'].className='dragContentOver';
destination = destinationObjArray[no]['obj'];
objFound = true;
}
}
}
sourceObjectArray['obj'].className='';
if(!objFound){
var left = sourceObjectArray['left'];
var top = sourceObjectArray['top'];
var width = sourceObjectArray['width'];
var height = sourceObjectArray['height'];
if(mouseX < (left/1 + width/1) && (mouseX + dragWidth/1) >left && mouseY < (top/1 + height/1) && (mouseY + dragHeight/1) >top){
destination = sourceObjectArray['obj'];
sourceObjectArray['obj'].className='dragContentOver';
}
}
return false;
}
function dragDropEnd()
{
if(dragDropTimer<10){
dragDropTimer = -1;
return;
}
dragContentDiv.style.display='none';
sourceObjectArray['obj'].style.backgroundColor = '#FFF';
if(destination){
destination.appendChild(dragSource);
destination.className='destinationBox';
// Check if position is correct, i.e. correct answer to the question
if(!destination.id || destination.id!='answerDiv'){
var previousEl = dragSource.parentNode.previousSibling;
if(!previousEl.tagName)previousEl = previousEl.previousSibling;
var numericId = previousEl.id.replace(/[^0-9]/g,'');
var numericIdSource = dragSource.id.replace(/[^0-9]/g,'');
if(numericId==numericIdSource){
dragSource.className='correctAnswer';
checkAllAnswers();
}
else
dragSource.className='wrongAnswer';
}
if(destination.id && destination.id=='answerDiv'){
dragSource.className='dragDropSmallBox';
}
}else{
if(dragSourceNextSibling)
dragSourceNextSibling.parentNode.insertBefore(dragSource,dragSourceNextSibling);
else
dragSourceParent.appendChild(dragSource);
}
dragDropTimer = -1;
dragSourceNextSibling = false;
dragSourceParent = false;
destination = false;
}
function checkAllAnswers()
{
for(var no=0;no<arrayOfEmptyBoxes.length;no++){
var sub = arrayOfEmptyBoxes[no].getElementsByTagName('div');
if(sub.length==0)return;
if(sub[0].className!='correctAnswer'){
return;
}
}
quizIsFinished();
}
function resetPositions()
{
if(dragDropTimer>=10)return;
for(var no=0;no<destinationObjArray.length;no++){
if(destinationObjArray[no]['obj']){
destinationObjArray[no]['left'] = getLeftPos(destinationObjArray[no]['obj'])
destinationObjArray[no]['top'] = getTopPos(destinationObjArray[no]['obj'])
}
}
sourceObjectArray['left'] = getLeftPos(answerDiv);
sourceObjectArray['top'] = getTopPos(answerDiv);
}
function initDragDropScript()
{
dragContentDiv = document.getElementById('dragContent');
answerDiv = document.getElementById('answerDiv');
answerDiv.onselectstart = cancelEvent;
var divs = answerDiv.getElementsByTagName('div');
var answers = new Array();
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dragDropSmallBox'){
divs[no].onmousedown = initDragDrop;
answers[answers.length] = divs[no];
arrayOfAnswers[arrayOfAnswers.length] = divs[no];
}
}
if(shuffleAnswers){
for(var no=0;no<(answers.length*10);no++){
var randomIndex = Math.floor(Math.random() * answers.length);
answerDiv.appendChild(answers[randomIndex]);
}
}
sourceObjectArray['obj'] = answerDiv;
sourceObjectArray['left'] = getLeftPos(answerDiv);
sourceObjectArray['top'] = getTopPos(answerDiv);
sourceObjectArray['width'] = answerDiv.offsetWidth;
sourceObjectArray['height'] = answerDiv.offsetHeight;
questionDiv = document.getElementById('questionDiv');
questionDiv.onselectstart = cancelEvent;
var divs = questionDiv.getElementsByTagName('div');
var questions = new Array();
var questionsOpenBoxes = new Array();
for(var no=0;no<divs.length;no++){
if(divs[no].className=='destinationBox'){
var index = destinationObjArray.length;
destinationObjArray[index] = new Array();
destinationObjArray[index]['obj'] = divs[no];
destinationObjArray[index]['left'] = getLeftPos(divs[no])
destinationObjArray[index]['top'] = getTopPos(divs[no])
destinationObjArray[index]['width'] = divs[no].offsetWidth;
destinationObjArray[index]['height'] = divs[no].offsetHeight;
questionsOpenBoxes[questionsOpenBoxes.length] = divs[no];
arrayOfEmptyBoxes[arrayOfEmptyBoxes.length] = divs[no];
}
if(divs[no].className=='dragDropSmallBox'){
questions[questions.length] = divs[no];
}
}
if(shuffleQuestions){
for(var no=0;no<(questions.length*10);no++){
var randomIndex = Math.floor(Math.random() * questions.length);
questionDiv.appendChild(questions[randomIndex]);
questionDiv.appendChild(questionsOpenBoxes[randomIndex]);
destinationObjArray[destinationObjArray.length] = destinationObjArray[randomIndex];
destinationObjArray.splice(randomIndex,1);
questionsOpenBoxes[questionsOpenBoxes.length] = questionsOpenBoxes[randomIndex];
questionsOpenBoxes.splice(randomIndex,1);
questions[questions.length] = questions[randomIndex];
questions.splice(randomIndex,1);
}
}
questionDiv.style.visibility = 'visible';
answerDiv.style.visibility = 'visible';
document.documentElement.onmouseup = dragDropEnd;
document.documentElement.onmousemove = dragDropMove;
setTimeout('resetPositions()',150);
window.onresize = resetPositions;
}
/* Reset the form */
function dragDropResetForm()
{
for(var no=0;no<arrayOfAnswers.length;no++){
arrayOfAnswers[no].className='dragDropSmallBox'
answerDiv.appendChild(arrayOfAnswers[no]);
}
}
window.onload = initDragDropScript;
//]]>
</script>
</head>
<body>
<div id="dragScriptContainer">
<div id="questionDiv">
<div class="dragDropSmallBox" id="q1">
5x1
</div>
<div class="destinationBox"></div>
<div class="dragDropSmallBox" id="q2">
5x2
</div>
<div class="destinationBox"></div>
<div class="dragDropSmallBox" id="q3">
5x3
</div>
<div class="destinationBox"></div>
<div class="dragDropSmallBox" id="q4">
5x4
</div>
<div class="destinationBox"></div>
<div class="dragDropSmallBox" id="q5">
5x5
</div>
<div class="destinationBox"></div>
<div class="dragDropSmallBox" id="q6">
5x6
</div>
<div class="destinationBox"></div>
<div class="dragDropSmallBox" id="q7">
5x7
</div>
<div class="destinationBox"></div>
<div class="dragDropSmallBox" id="q8">
5x8
</div>
<div class="destinationBox"></div>
<div class="dragDropSmallBox" id="q9">
5x9
</div>
<div class="destinationBox"></div>
<div class="dragDropSmallBox" id="q10">
5x10
</div>
<div class="destinationBox"></div>
</div>
<div id="answerDiv">
<div class="dragDropSmallBox" id="a1">
5
</div>
<div class="dragDropSmallBox" id="a2">
10
</div>
<div class="dragDropSmallBox" id="a3">
15
</div>
<div class="dragDropSmallBox" id="a4">
20
</div>
<div class="dragDropSmallBox" id="a5">
25
</div>
<div class="dragDropSmallBox" id="a6">
30
</div>
<div class="dragDropSmallBox" id="a7">
35
</div>
<div class="dragDropSmallBox" id="a8">
40
</div>
<div class="dragDropSmallBox" id="a9">
45
</div>
<div class="dragDropSmallBox" id="a10">
50
</div>
</div>
</div>
<div id="dragContent"></div>
<input type="button" onclick="dragDropResetForm();return false"
value="Reset" />
</body>
</html>