Jump to content

Drag and drop help

dc_jt

By dc_jt
in Javascript Help

 Share

Recommended Posts

dc_jt Advanced Member

dc_jt

Posted
Posted

Hi

 

Ive tried duplicating the following to my code and Ive almost got it to work, however when I drag my image the image is displayed a lot further down the page and not next to my mouse cursor. I really dont know why, could anyone have a look please?

 

I used this:

http://www.dhtmlgoodies.com/scripts/drag-drop-custom/demo-drag-drop-2.html

 

My code is:

<link href="../assets/css/main.css" rel="stylesheet" type="text/css" />
<link href="../assets/css/menu.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="../assets/js/RollOver.js" type="text/javascript"></script>
<script language="JavaScript" src="../assets/js/menu.js" type="text/javascript"></script>
<script type="text/javascript" src="/assets/js/drag-drop-custom.js"></script>

</head>
<body>	
<div id="wrapper">
<?php include($_SERVER['DOCUMENT_ROOT']."/_includes/pagetop.inc.php")?>  
<div id="page-content">
    	<div id="header">
    	<div id="basket-wrap">
        <?php include($_SERVER['DOCUMENT_ROOT']."/_includes/basket.inc.php")?>
        </div>
        <?php include($_SERVER['DOCUMENT_ROOT']."/_includes/toplinks.inc.php")?>      
	<?php include($_SERVER['DOCUMENT_ROOT']."/_includes/header.inc.php")?></div>
        <div id="left-col">
        	<?php include($_SERVER['DOCUMENT_ROOT']."/order-online/sidenav.inc.php")?>
    </div>
        <div id="right-col">
          <img src="../assets/images/titles/treatboxes.gif" alt="" width="165" height="29" border="0" class="pagetitle" />
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tortor. Etiam non mauris. Fusce a libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
        <div id="shop-wrap">
       	  <div id="treatboxes-tabs-wrap"><a href="recommended-treatboxes.php"><img src="../assets/images/shop/tab-recomendedbox-inactive.gif" border="0" alt="Recommended Treatboxes" /></a><a href="build-your-own.php"><img src="../assets/images/shop/tab-buildyourown-active.gif" border="0" alt="Build Your Own Treatbox" /></a></div>
            <div id="treatbox-ordering-wrap">
            	<div id="treatbox-ordering">
                	<div id="order-box-top"><a href="#"><img src="../assets/images/shop/help-button.gif" alt="Help" class="help-button" border="0" /></a><p>Choose your box size below and then drag and drop cookies into your Treatbox.  </p></div>
                    <div id="order-box-one">
                    <ul>
                    	<li class="box-size-active"><a href="#"><img src="../assets/images/shop/box-size-13.gif" border="0" alt="13" /></a></li>
                        <li class="box-size-inactive"><a href="#"><img src="../assets/images/shop/box-size-18.gif" border="0" alt="18" /></a></li>
                        </ul>
                        <h1>Choose your Treatbox size</h1>
                    </div>
                    
             <div id="order-box-two">
                    	<div class="drop-treatbox-wrap">
                        	<ul id="treatbox-tabs">
                            	<li class="active-tab"><a href="#">Cookie View</a></li>
                                <li class="inactive-tab"><a href="#">List View</a></li>
                                </ul>
                                <div class="treatbox-drop-area">
                                
                                <!-- Cookie drop area -->
        <div id="rightColumn">
            <div id="dropBox" class="dropBox">
                <div id="dropContent2"></div>		
            </div>
	</div>

	 </div>
                                <div class="remaining-cookies-box">Remaining spaces in your Treatbox:  00</div>
                            </div><!--treatbox-wrap-->
                            
        <h1>Choose your Cookies</h1>
                    <div class="cookie-start-tray">
                    
	<!-- Cookie box -->
	<div id="leftColumn">
		<div id="dropContent">
			<div class="dragableBox" id="box1"><img src="../assets/images/cookie.gif" /></div>
			<div class="dragableBox" id="box2"><img src="../assets/images/cookie.gif" /></div>
			<div class="dragableBox" id="box3"><img src="../assets/images/cookie.gif" /></div>
			<div class="dragableBox" id="box4"><img src="../assets/images/cookie.gif" /></div>
		</div>
	</div>
        



				</div>                    
                    <div class="cookie-delete-box"> </div>
                    </div><!--orderboxtwo-->
                    <div id="order-box-three"><a href="#"><img src="../assets/images/shop/add-to-basket-button.gif" alt="Add to your basket" border="0" class="basket-button" /></a><h1>Complete your Order</h1><p>If you are happy with your choices click ‘Add to basket’</p></div>
              </div>
          </div><!--treatbox-ordering-wrap-->
        </div><!--shopwrap-->
    </div><!--rightcol-->
  </div><!-- page-content-->
    <?php include($_SERVER['DOCUMENT_ROOT']."/_includes/footer.inc.php")?>
</div><!--wrapper-->




<script type="text/javascript">

// Custom drop actions for <div id="dropBox"> and <div id="leftColumn">
function dropItems(idOfDraggedItem,targetId,x,y)
{
if(targetId=='dropBox'){	// Item dropped on <div id="dropBox">
	var obj = document.getElementById(idOfDraggedItem);
	if(obj.parentNode.id=='dropContent2')return;		
	document.getElementById('dropContent2').appendChild(obj);	// Appending dragged element as child of target box
}
if(targetId=='leftColumn'){	// Item dropped on <div id="leftColumn">
	var obj = document.getElementById(idOfDraggedItem);
	if(obj.parentNode.id=='dropContent')return;	
	document.getElementById('dropContent').appendChild(obj);	// Appending dragged element as child of target box
}

}

function onDragFunction(cloneId,origId)
{
self.status = 'Started dragging element with id ' + cloneId;

var obj = document.getElementById(cloneId);
obj.style.border='1px solid #F00';
}




var dragDropObj = new DHTMLgoodies_dragDrop();
dragDropObj.addSource('box1',true,true,true,false,'onDragFunction');	// Make <div id="box1"> dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true,true,true,false,'onDragFunction');	// Make <div id="box2"> dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true,true,true,false,'onDragFunction');	// Make <div id="box3"> dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true,true,true,false,'onDragFunction');	// Make <div id="box4"> dragable. slide item back into original position after drop
dragDropObj.addTarget('dropBox','dropItems');	// Set <div id="dropBox"> as a drop target. Call function dropItems on drop
dragDropObj.addTarget('leftColumn','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
dragDropObj.init();
</script>

</body>
</html>

 

Im not sure whether its anything to do with my style sheet. Here it is anyway:

 

@charset "utf-8";
/* CSS Document */

body{
margin:0;
padding:0;
width:100%;
height:100%;
font-family:Arial, Helvetica, sans-serif;
background:url(../images/site-elements/backgroundImage.jpg) bottom center no-repeat;
background-position:bottom;
background-attachment:fixed;
background-color:#b13344;
}
ul,li{
margin:0;
padding:0;
}
#wrapper{
width:910px;
height:100%;
margin:30px auto 0 auto;
padding:0;
}
#wrapper .pageTop{
width:910px;
height:10px;
float:left;
position:relative;
background:url(../images/site-elements/pageTop.png) top left no-repeat;
margin:0;
padding:0;
overflow:hidden;
}
#wrapper #footer{
width:910px;
height:46px;
float:left;
position:relative;
background:url(../images/site-elements/pageFooter.png) top left no-repeat;
margin:0;
padding:0;
text-align:center;
color:#9b2c42;
font-size:70%;
}
*html #wrapper .pageTop{
background:url(../images/site-elements/pageTop-ie6.gif) top left no-repeat;
}
*html #wrapper #footer{
background:url(../images/site-elements/pageFooter-ie6.gif) top left no-repeat;
}
#wrapper #page-content{
width:910px;
height:auto;
overflow:hidden;
background:url(../images/site-elements/pageBg.png) top left repeat-y;
margin:0;
padding:10px 0 40px 0;
float:left;
position:relative;
}
*html #wrapper #page-content{
background:url(../images/site-elements/pageBg-ie6.gif) top left repeat-y;
}
#wrapper #page-content #header{
width:864px;
height:auto;
float:left;
position:relative;
margin:0;
padding:0 23px 10px 23px;
z-index:1;
}


/*----------nav-wrap------------*/

.navmiddle{
width:864px;
height:auto;
/*background:url(../images/site-elements/navBg.gif) top right no-repeat;*/
float:left;
position:relative;
margin:10px 0 0 0;
padding:0;
}

/*-------basket------------*/

#header #basket-wrap{
width:123px;
height:18px;
background:url(../images/site-elements/basketBg.gif) top left no-repeat;
float:right;
position:relative;
margin:0 0 0 22px;
padding:26px 12px 0 0;
color:#fff;
font-size:70%;
text-align:right;
}
#header #basket-wrap a, #header #basket-wrap a:visited{
color:#fff;
text-decoration:none;
}
#header #basket-wrap a:hover{
color:#fff;
text-decoration:none;
border-bottom:1px #fff dashed;
}
h1{
color:#9b2c42;
font-size:90%;
margin:0 0 20px 0;
padding:0;
}
h2{
color:#6b655d;
font-size:80%;
}
h3{
color:#9b2c42;
font-size:76%;
font-weight:bold;
}
h4{
color:#6b655d;
font-size:76%;
font-weight:bold;
}
p{
color:#6b655d;
font-size:76%;
line-height:140%;
margin:0 0 14px 0;
padding:0;
}
p a, p a:visited{
color:#9b2c42;
font-weight:bold;
text-decoration:underline;
}
p a:hover{
color:#37332d;
font-weight:bold;
text-decoration:underline;
}

/*----------footer-links---------*/

#footer a, #footer a:visited{
color:#9b2c42;
text-decoration:none;
border-bottom:0;
}
#footer a:hover{
color:#000;
text-decoration:none;
border-bottom:#000 1px dashed;
}

#header .toplinks{
width:264px;
height:auto;
float:right;
position:relative;
display:block;
margin:0;
padding:0;
}

/*------------------columns----------------*/

#page-content #left-col{
width:153px;
height:auto;
padding:20px 0 0 23px;
float:left;
position:relative;
margin:0;
padding:0;
}
#page-content #right-col{
width:683px;
height:auto;
float:right;
position:relative;
margin:0;
padding:20px 33px 0 0;
}
#page-content #right-col-small{
width:480px;
height:auto;
float:right;
position:relative;
margin:0;
padding:20px 210px 0 0;
}
#page-content #right-col .pagetitle{
margin:0 0 20px 0;
}
#page-content #right-col ul li{
/*text-align:left;*/
font-family:Arial, Helvetica, sans-serif;
font-size:75%;
list-style-image:url(../assets/images/bullet.gif);
}
/*-----------home-content-----------*/

#page-content #home-content-wrap{
width:864px;
height:auto;
padding:23px 23px 0 23px;
margin:0;
float:left;
position:relative;
}
#page-content #home-content-wrap .home-top-div{
width:864px;
height:195px;
float:left;
position:relative;
margin:20px 0 0 0;
padding:0;
background:url(../images/home/homeShopTop.jpg) top left no-repeat;
color:#2690d0;
font-size:76%;
font-weight:bold;
}
#page-content #home-content-wrap .home-top-div .home-shop-top-banner{
width:864px;
height:24px;
float:left;
position:relative;
margin:4px 0 14px 0;
background:url(../images/home/newStoreBannerBg.gif) top center no-repeat;
padding:3px 0 0 0;
text-align:center;
font-size:120%;
color:#000;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
#page-content #home-content-wrap .home-top-div .home-shop-left{
width:416px;
height:auto;
height:100px;
float:left;
position:relative;
border-right:#c2e3f7 1px solid;
margin:0;
padding:0 15px 0 0;
text-align:right;
}
#page-content #home-content-wrap .home-top-div .home-shop-left .title{
float:right;
position:relative;
margin:10px 0 10px 0;
}
#page-content #home-content-wrap .home-top-div .home-shop-left .treatbox-image{
float:left;
position:absolute;
left:-10px;
top:-50px;
margin:0;
padding:0;
}
#page-content #home-content-wrap .home-top-div .home-shop-right{
width:416px;
height:auto;
height:100px;
float:right;
position:relative;
border-left:#7fcbf9 1px solid;
margin:0;
padding:0 0 0 15px;
}
#page-content #home-content-wrap .home-top-div .home-shop-right .title{
float:left;
position:relative;
margin:10px 0 10px 0;
}
#page-content #home-content-wrap .home-top-div .home-shop-right .cookie-image{
float:right;
position:absolute;
right:-10px;
top:-50px;
margin:0;
padding:0;
}

#page-content #home-content-wrap .home-top-div .home-buy-online-area{
width:864px;
height:23px;
float:left;
position:relative;
margin:0;
padding:6px 0 0 0;
background:url(../images/home/buyBtnsBg.gif) top center no-repeat;
color:#fff;
font-size:110%;
text-align:center;
font-weight:bold;
}
#page-content #home-content-wrap .home-top-div .home-buy-online-area .buttonspacer{
width:90px;
text-align:left;
display:inline;
padding:0 15px 0 15px;
}
#page-content #home-content-wrap .home-top-div .home-buy-online-area a, #page-content #home-content-wrap .home-top-div .home-buy-online-area a:visited{
color:#fff;
text-decoration:none;
}
#page-content #home-content-wrap .home-top-div .home-buy-online-area a:hover{
color:#f9dc59;
text-decoration:none;
}
#page-content #home-content-wrap .home-bottom-div{
width:864px;
height:auto;
float:left;
position:relative;
margin:0 0 10px 0;
padding:0;
}

/*------------sidenav-------------*/

#page-content #left-col #side-nav{
width:153px;
height:auto;
float:left;
position:relative;
padding:20px 0 0 23px;
line-height:26px;

}
#page-content #left-col #side-nav ul{
list-style:none;
margin:0;
padding:0;
}
#page-content #left-col #side-nav li{
font-size:76%;
background:0;
list-style:none;
display:block;
border-bottom:#e0ddc5 1px dashed;
}
#page-content #left-col #side-nav li a{
padding:4px 0 4px 16px;
color:#037890;
text-decoration:none;
display:block;
}
#page-content #left-col #side-nav li a:visited{
color:#037890;
text-decoration:none;
}
#page-content #left-col #side-nav li a:hover{
text-decoration:none;
display:block;
background:url(../images/nav/sideNavArrow.gif) left no-repeat;
color:#5cb7c8;
}

#page-content #left-col #side-nav img{
float:left;
position:relative;
display:block;
margin:0 0 6px 0;
}
/*-------body-styles-----------*/

.bodypic {
text-align: right; 
float: right; 
width: 200px; 
margin-left: 8px;
margin-bottom: 8px;
background-image:#edcd9f;
padding-left:16px;
}

.bodypic2 {
text-align: left; 
float: left; 
width: 160px; 
height: 130px;
background: #ccc;
margin-right: 8px;
margin-bottom: 8px;
padding-right:16px;
}
.bodypic-right {
text-align: right; 
float: right;  
margin-left: 6px;
margin-bottom: 6px;
padding-left:16px;
}

.bodypic-left {
text-align: left; 
float: left; 
margin-right: 6px;
margin-bottom: 6px;
padding-right:16px;
}
.complete{
font-family:Arial, Helvetica, sans-serif;
font-size:75%;
color: #6b655d;
text-align:left;
}
a.downloads {
float:left;
color: #836552;
font-size: 75%;
background-image: url(/assets/images/pdf.gif);
background-repeat: no-repeat;
background-position: left;
padding-left: 20px;
padding-top:0px;
font-weight: 600;
text-decoration: none;

line-height: 20px;

}

a.downloads:hover {
color: #b69083;
font-size: 75%;
background-image: url(/assets/images/pdf.gif);
background-repeat: no-repeat;
background-position: left;
padding-left: 20px;
font-weight: 600;
text-decoration: none;


}
.errors{
font-family:Arial, Helvetica, sans-serif;
font-size:75%;
font-weight:bold;
color:#9b2c42;
line-height:20px;
text-align:left;
}

.errors a{
color:#9b2c42;
}

.errors a:hover{
color:#6b655d;
}
.complete{
font-family:Arial, Helvetica, sans-serif;
font-size:75%;
color: #6b655d;
text-align:left;
}

.mainbody ul li{
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:75%;
list-style-image:url(../images/bullet.gif);
}

.mainbody ul li a{
color:#0c748a;
text-decoration:none;
}

.mainbody ul li a:hover{
color:#6b655d;
}

.mainbody ul ul li{
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:75%;
list-style:none;
}

.pollresults{
float:left;
width:680px;
margin-bottom:20px;
}

.label{
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#6b655d;
width:280px;
height:24px;
padding-top:6px;
text-align:right;
}


.bar{
float:right;
width:300px;
height:30px;
}

.bar img{
float:left;
}

.question{
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#6b655d;
font-weight:bold;
text-align:left;
clear:both;
}
/*table {
margin:10px 0 10px 0;
}
table td{
padding:10px 5px 15px 0;
width:50%;
text-align:left;
vertical-align:top;
margin:0;
color:#6B655D;
font-size:75%;
border-bottom:#C0BEBB 1px solid;
}*/


a.jobdes {
font-weight:bold;
padding:5px 26px 5px 26px;
color:#cc9f9b;
text-decoration:none;
margin-right:2px;
display:block;
float:left;
border:1px solid #eae7d2;
border-bottom:0;
cursor:pointer;
background:url(../images/recruitment/tabbg-inactive.gif) top left repeat-x;
}

a.jobdesselected {
font-weight:bold;
padding:5px 26px 5px 26px;
color:#9b2c42;
text-decoration:none;
margin-right:2px;
margin-top:1px;
display:block;
float:left;
border:1px solid #dddac0;
border-bottom:0;
position:relative;
background:url(../images/recruitment/tabbg.gif) top left repeat-x;
background-color:#dddac0;
z-index:2;
cursor:pointer;
}

#jobdesbox {
width:450px;
height:auto;
border:1px solid #dddac0;
background:url(../images/recruitment/box-top-bg.gif) top left repeat-x;	
margin-top:-1px;
float:left;
padding:20px 10px 10px 10px;
position:relative;
z-index:0;
margin-bottom:20px;
}

#jobdesbox p {
font-size:0.8em;
}

#jobdesbox ul li {
color:#666666;
margin:5px 0 10px 20px;
}

#pages {
text-align:left;
width:457px;
padding:5px 5px 5px 10px;
border-top:1px dotted #9b2c42;
}

.pageslink {
font-weight:bold;
font-size:0.8em;
text-align:left;
color:#9b2c42;
}

a.pageslink {
color:#6b655d;
text-decoration:none;
padding:1px;
margin:0px 2px 0px 2px;
}

a.pageslink:hover {
color:#ca5362;
}

/* locations/international page address */

.internationaladdress {
width:200px;
height:auto;
float:left;
margin-right:10px;
margin-top:30px;
}

.internationaladdress p {
font-weight:normal;
margin:0;
padding:0;
}

.internationaladdress h3 {
font-size:0.8em;
margin:0px 0px 15px 0px;
color:#6b655d;
}
.map {
width: 250px;
height:300px;
float:right;

}

.newstroresbanner {
float:right;
width: 521px;
background-image: url(../images/stores_banner.gif);
background-repeat: no-repeat;
height:96px;
}
.bannerouter {
float:center;
margin-right:auto;
margin-left:auto;
width:680px;
height:100px;
padding-top:20px;



}

.soontext {
float:right;
width:200px;
margin-top:34px;
margin-right:30px;
color: #fff;
font-size:80%;

}

.storeslist {
width: auto;
margin-left:0px;
}

.storepic {
float:right;
background:#ccc;
width:180px;
height:150px;

}

.pageno {
color: #6b655d;
float:right;
font-size: 75%;
padding-top: 0px;
padding-right:20px;
text-decoration: none;
padding-bottom:12px;
word-spacing:3px;
}


#store{
float: left;
width: 450px;
margin-top:0px;
margin-bottom:20px;
}

.storeheader{
background-image:url(../images/locations.jpg);
background-repeat:no-repeat;
background-position:top, right;
font-size:75%;
color:#9B2C42;
width:450px;
height:20px;
float:right;
padding-left:20px;
padding-top:15px;
padding-bottom:15px;
margin-bottom:8px;
}

.addressdiv{
float: left;
}

.address{
background-image:url(../images/address.gif);
background-position:left;
background-repeat:no-repeat;
padding-left:30px;
font-weight:bold;
}

.teldiv {
float: right;

}
.addressdiv p{
margin:0 0 2px 0;
}
.tel{
background-image:url(../images/tel.gif);
background-position:left;
background-repeat:no-repeat;
padding-left:30px;
font-weight:bold;
}

.tel2{
background-image:url(../images/map_sm.gif);
background-position:left top;
background-repeat:no-repeat;
padding-left:30px;
font-weight:bold;
}


#storedetails .button{
font-size:75%;
float:left;
    width:100px;
background-color: #909090;
color: #FFF;
text-align:center;
border: 1px solid #533531;
padding-bottom: 2px;
font-weight: 600;
margin-top:0px;
}

/*--------------treatbox-------------*/

#right-col #shop-wrap{
width:683px;
height:auto;
float:left;
position:relative;
margin:20px 0 0 0;
padding:0;
overflow:hidden;
}
#right-col #shop-wrap #treatboxes-tabs-wrap{
width:683px;
height:78px;
float:left;
position:relative;
margin:0;
padding:0;
background:url(../images/shop/treatboxes-tabs-bg.gif) bottom left no-repeat;	
}
#right-col #shop-wrap #treatboxes-tabs-wrap img{
margin:0 2px 0 0;
}
#right-col #shop-wrap #treatbox-ordering-wrap{
width:649px;
height:auto;
padding:0 17px 0 17px;
margin:0;
float:left;
position:relative;
margin:0;
background:url(../images/shop/treatboxes-order-borders.gif) top left no-repeat;
}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering{
width:649px;
height:auto;
margin:0;
padding:0;
float:left;
position:relative;
}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-top{
width:649px;
height:97px;
float:left;
position:relative;
margin:0;
padding:0;
background:url(../images/shop/treatboxes-ordering-topboxbg.gif) top left no-repeat;
}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-top .help-button{
float:right;
margin:40px 20px 0 0;
}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-one{
width:649px;
height:89px;
float:left;
position:relative;
margin:0;
padding:0;
background:url(../images/shop/treatboxes-ordering-box-one-bg.gif) top left no-repeat;
}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-one ul{
width:260px;
height:auto;
float:right;
margin:15px 0 0 0;
padding:0;
list-style:none;
}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-one li{
list-style:none; 
display:block;
float:left;
margin:0 6px 0 0;
padding:0;
width:118px;
height:57px;
}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-one li img{
margin:18px 0 0 16px;
}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-one li.box-size-active{
background:url(../images/shop/box-size-active.gif) top left no-repeat;
}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-one li.box-size-inactive{
background:url(../images/shop/box-size-inactive.gif) top left no-repeat;

}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-two{
width:649px;
height:422px;
float:left;
position:relative;
margin:0;
padding:0;
background:url(../images/shop/treatboxes-ordering-box-two-bg.gif) top left no-repeat;
}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-three{
width:649px;
height:115px;
float:left;
position:relative;
margin:0;
padding:0;
background:url(../images/shop/treatboxes-ordering-box-three-bg.gif) top left no-repeat;
}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-three .basket-button{
float:right;
margin:40px 20px 0 0;
}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-top p{
padding:70px 0 0 20px;
margin:0;
color:#fff;
font-size:76%;
}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-three p{
padding:5px 0 0 80px;
color:#fff;
font-size:76%;
}
#right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-one h1, #right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-two h1, #right-col #shop-wrap #treatbox-ordering-wrap #treatbox-ordering #order-box-three h1{
padding:30px 0 0 80px;
margin:0;
color:#fff;
font-size:100%;
font-weight:bold;
}

/*----------------------drag-n-drop-section-----------------------------*/


#treatbox-ordering #order-box-two .cookie-start-tray{
width:285px;
height:248px;
float:left;
position:relative;
margin:20px 0 0 74px;
padding:10px;
background:url(../images/shop/cookies-start-tray-bg.gif) top left no-repeat;
}
*html #treatbox-ordering #order-box-two .cookie-start-tray{
margin:20px 0 0 36px;
}
#treatbox-ordering #order-box-two .drop-treatbox-wrap{
width:243px;
height:374px;
margin:30px 22px 0 0;
padding:0;
float:right;
position:relative;
background:url(../images/shop/treatbox-bg.gif) bottom left no-repeat;
}
*html #treatbox-ordering #order-box-two .drop-treatbox-wrap{
margin:30px 11px 0 0;
}
#treatbox-ordering #order-box-two .drop-treatbox-wrap ul#treatbox-tabs{
width:243px;
height:25px;
list-style:none;
margin:0;
padding:0;
}
#treatbox-ordering #order-box-two .drop-treatbox-wrap li{
list-style:none;
display:block;
float:left;
color:#fff;
font-weight:bold;
text-align:center;

}
#treatbox-ordering #order-box-two .drop-treatbox-wrap li.active-tab{
background:url(../images/shop/treatbox-active-tab.gif) top left no-repeat;
color:#fff;
width:120px;
height:18px;
margin:0 2px 0 0;
padding:7px 0 0 0;
}
#treatbox-ordering #order-box-two .drop-treatbox-wrap li.inactive-tab{
background:url(../images/shop/treatbox-inactive-tab.gif) top left no-repeat;
color:#f5d0d6;
width:120px;
height:18px;
padding:7px 0 0 0;
}
#treatbox-ordering #order-box-two .drop-treatbox-wrap li.active-tab a, #treatbox-ordering #order-box-two .drop-treatbox-wrap li.active-tab a:visited{
text-decoration:none;
color:#fff;
}
#treatbox-ordering #order-box-two .drop-treatbox-wrap li.inactive-tab a, #treatbox-ordering #order-box-two .drop-treatbox-wrap li.inactive-tab a:visited{
text-decoration:none;
color:#f5d0d6;
}
#treatbox-ordering #order-box-two .drop-treatbox-wrap li a:hover{
color:#fff;
text-decoration:none;
}
#treatbox-ordering #order-box-two .cookie-delete-box{
width:247px;
height:63px;
float:left;
position:relative;
margin:8px 0 0 74px;
padding:0;
background:url(../images/shop/cookie-delete-box-bg.gif) top left no-repeat;
}
*html #treatbox-ordering #order-box-two .cookie-delete-box{
margin:8px 0 0 37px;
}
#treatbox-ordering #order-box-two .drop-treatbox-wrap .remaining-cookies-box{
width:233px;
height:22px;
margin:0;
padding:3px 0 0 10px;
float:left;
position:relative;
color:#fff;
font-weight:bold;
font-size:76%;
}
#treatbox-ordering #order-box-two .drop-treatbox-wrap .treatbox-drop-area{
width:223px;
height:303px;
padding:10px;
margin:0;
float:left;
position:relative;
}

/*----------------recommended-treatboxes---------------*/

#right-col #shop-wrap #recommended-boxes-wrap{
width:649px;
height:auto;
padding:0 17px 0 17px;
margin:0;
float:left;
position:relative;
margin:0;
background:url(../images/shop/treatboxes-order-borders.gif) top left no-repeat;
}
#right-col #shop-wrap #recommended-boxes-wrap .recommended-box{
width:649px;
height:117px;
padding:12px 0 0 0;
margin:0 0 20px 0;
float:left;
position:relative;
background:url(../images/shop/recommended-box-bg.gif) top left no-repeat;
}
#right-col #shop-wrap #recommended-boxes-wrap .recommended-box-banner{
width:646px;
height:125px;
padding:0;
margin:0 0 20px 0;
float:left;
position:relative;
}
#right-col #shop-wrap #recommended-boxes-wrap .recommended-box .rec-box-left{
width:449px;
height:95px;
float:left;
position:relative;
margin:0;
padding:0 0 0 6px;
background:url(../images/shop/recommended-box-border-right.gif) top right repeat-y;
}
#right-col #shop-wrap #recommended-boxes-wrap .recommended-box .rec-box-left .box-information{
width:290px;
height:auto;
float:right;
position:relative;
margin:0;
padding:0 5px 0 0;
}
#right-col #shop-wrap #recommended-boxes-wrap .recommended-box .rec-box-right{
width:130px;
height:95px;
float:left;
position:relative;
margin:0;
padding:0 20px 0 20px;
}
#right-col #shop-wrap #recommended-boxes-wrap .recommended-box .rec-box-left .box-information h1{
color:#fff;
font-size:120%;
font-weight:normal;
margin:0 0 2px 0;
padding:0;
}
#right-col #shop-wrap #recommended-boxes-wrap .recommended-box .rec-box-left .box-information p{
color:#fff;
color:#3f8b9d;
font-size:76%;
font-weight:normal;
margin:3px 0 0 0;
padding:0;
line-height:100%;
}
#right-col #shop-wrap #recommended-boxes-wrap .recommended-box .rec-box-left .box-information p.box-prices{
color:#2690d0;
margin:10px 0 0 0;
padding:0;
line-height:100%;
float:left;
}
#right-col #shop-wrap #recommended-boxes-wrap .recommended-box .rec-box-left .rec-box-img{
width:142px;
height:136px;
float:left;
position:absolute;
top:-20px;
left:-5px;
margin:0;
padding:0;
}

#right-col #shop-wrap #recommended-boxes-wrap .recommended-box .rec-box-right form{
width:160px;
height:auto;
margin:0;
padding:15px 20px 0 0;
}
#right-col #shop-wrap #recommended-boxes-wrap .recommended-box .rec-box-right form .frmfield{
width:74px;
padding:2px;
border:#a7a6aa 1px solid;
color:#6b655d;
font-size:70%;
margin:0 0 2px 0;
}
#right-col #shop-wrap #recommended-boxes-wrap .recommended-box .rec-box-right form .frmdropfield{
width:80px;
padding:2px;
border:#a7a6aa 1px solid;
color:#6b655d;
font-size:70%;
margin:0 0 2px 0;
}
#right-col #shop-wrap #recommended-boxes-wrap .recommended-box .rec-box-right form label{
color:#fff;
width:60px;
float:left;
margin:0;
padding:2px;
font-size:70%;
font-weight:bold;
}
#right-col #shop-wrap #recommended-boxes-wrap .recommended-box .rec-box-right form .basket-button{
color:#fff;
font-size:1%;
width:135px;
height:29px;
background:url(../images/shop/add-to-basket-button.gif) top left no-repeat;
margin:4px 0 0 8px;
padding:0;
border:0;
cursor:pointer;
}

/*-------------yourbasket----------------*/

#basket-wrap2{
width:683px;
height:auto;
float:left;
position:relative;
margin:0;
padding:20px 0 0 0;
background:url(../images/shop/treatboxes-tabs-bg.gif) top left no-repeat;
}
*html #basket-wrap2{
padding:0;
}
#basket-wrap-checkout{
width:280px;
height:auto;
float:left;
position:relative;
margin:0 0 14px 20px;
padding:0;
}
#basket-wrap-checkout h1{	
font-size:80%;
margin:0 0 20px 0;
color:#000;
}
#page-content #right-col .ordering-steps{
width:683px;
height:auto;
float:left;
position:relative;
margin:0;
padding:0;
}
#page-content #right-col .ordering-steps ul{
width:683px;
margin:0;
padding:0;
list-style:none;
}
#page-content #right-col .ordering-steps li{
width:120px;
height:26px;
margin:0 1px 0 0;
padding:18px 0 0 0;
display:block;
float:left;
position:relative;
font-size:80%;
font-weight:bold;
text-align:center;
color:#c38a8a;
background:url(../images/shop/basket-tab-inactive.gif) top left no-repeat;
}
#page-content #right-col .ordering-steps li.basket-active-tab{
background:url(../images/shop/basket-tab-active.gif) top left no-repeat;
color:#9b2c42;
}
#page-content #right-col .ordering-steps li a, #page-content #right-col .ordering-steps li a:visited{
text-decoration:none;
color:#c38a8a;
}
#page-content #right-col .ordering-steps li.basket-active-tab a, #page-content #right-col .ordering-steps li.basket-active-tab a:visited{
text-decoration:none;
color:#9b2c42;
}
#page-content #right-col .ordering-steps li a:hover{
color:#000;
text-decoration:none;
text-align:center;
}
#basket-wrap2 table{
width:683px;
float:left;
color:#6B655D;
font-size:70%;
background:url(../images/shop/treatboxes-order-borders.gif) top left no-repeat;
}

#basket-wrap2 table td{
vertical-align:middle;
padding:6px;
border:0;
border-bottom:#dddac0 1px solid;
border-left:#dddac0 1px solid;
margin-bottom:1px;	
}
#basket-wrap2 table .basket-order-total{
background-color:#9e6470;
color:#fff;
font-weight:bold;
padding:8px 0 8px 0;
text-align:center;
}
#basket-wrap2 table .basket-order-grandtotal{
background-color:#9b2c42;
color:#fff;
font-weight:bold;
padding:8px 0 8px 0;
text-align:center;
}
#basket-wrap2 table .basket-order-subtotal{
color:#fff;
font-weight:bold;
padding:8px 0 8px 0;
}
#basket-wrap2 table .basket-prices{
color:#666;
font-weight:bold;
padding:8px 0 8px 0;
background-color:#edecd4;
text-align:center;
}
#basket-wrap2  .place-order-btn{
font-size:75%;
float:right;
width:105px;
background-color: #909090;
color: #FFF;
text-align:center;
border:0;
border: 1px;
border-style:solid;
border-color:#533531;
padding: 2px 0 2px 0;
font-weight: 600;
margin-top:8px;
margin-left:8px;
}
#basket-wrap2 .delete-button{
width:20px;
height:16px;
background:url(../images/shop/deleteIcon.gif) top left no-repeat;
margin:0;
padding:0;
border:0;
cursor:pointer;
font-size:1%;
color:#9b2c42;
}
.updated-basket{
width:683px;
height:auto;
background:url(../images/shop/treatboxes-tabs-bg.gif) bottom left no-repeat;
margin:0;
padding:0;
float:left;
position:relative;
}
.updated-basket .basket-number{
color:#9B2C42;
font-weight:bold;
}
.updated-basket p{
margin-top:25px;
margin-left:10px;
font-size:80%;
}

#DragDiv
{
height:100px;
width:100px;
background-color:blue;
position:relative;
}


/*------------ordering-step-2--------------*/

#basket-wrap2 .ordering-step{
width:683px;
height:auto;
float:left;
position:relative;
margin:0;
padding:0;
}
#basket-wrap2 .ordering-step .step-col{
width:310px;
height:auto;
float:left;
position:relative;
margin:0;
padding:15px;
}
#basket-wrap2 .ordering-step .step-col-border-right{
border-right:#dddac0 1px solid;
}
#basket-wrap2 .ordering-step .step-col h2{
color:#9b2c42;
font-size:80%;
margin:0 0 15px 0;
}
#basket-wrap2 .ordering-step .step-col form{
width:310px;
height:auto;
float:left;
position:relative;
margin:0 0 10px 0;
padding:0 0 10px 0;
}
#basket-wrap2 .ordering-step .step-col form label{
color:#6B655D;
width:100px;
margin:0 20px 0 0;
float:left;
padding:2px;
font-size:76%;
}
#basket-wrap2 .ordering-step .step-col form select{
width:180px;
padding:2px;
margin:0 0 4px 0;
color:#6B655D;
font-size:76%;
border:#a09d98 1px solid;
border-left:#6B655D 1px solid;
border-top:#6B655D 1px solid;
}
#basket-wrap2 .ordering-step .step-col form .collection-date{
width:260px;
color:#6B655D;
font-size:76%;
margin:0 0 4px 0;
padding:4px 0 0 10px;
}
#basket-wrap2 .ordering-step .step-col form input{
margin:0 0 0 10px;

}
#basket-wrap2 .ordering-step .step-col form .frmfield{
border:#a09d98 1px solid;
border-left:#6B655D 1px solid;
border-top:#6B655D 1px solid;
width:180px;
margin:0 0 2px 0;
}
#basket-wrap2 .ordering-step .step-col form .frmfield-dates{
border:#a09d98 1px solid;
border-left:#6B655D 1px solid;
border-top:#6B655D 1px solid;
width:50px;
margin:0 4px 4px 0;
}
#basket-wrap2 .ordering-step .step-col form .frmfield-small{
border:#a09d98 1px solid;
border-left:#6B655D 1px solid;
border-top:#6B655D 1px solid;
width:48px;
margin:0 0 4px 0;
}
#basket-wrap2 .ordering-step .step-col form .security-no-q a, #basket-wrap2 .ordering-step .step-col form .security-no-q a:visited{
color:#9b2c42;
font-size:60%;
margin:-10px 0 10px 10px;
padding-top:-10px;
}
#basket-wrap2 .ordering-step .step-col form .security-no-q a:hover{
color:#000;
text-decoration:underline;
}

#basket-wrap2 .ordering-step #hours p{
margin:0;
padding:0;
line-height:110%;
}

 #mainContainer{
	width:600px;
	margin:0 auto;
	margin-top:10px;
	border:1px solid #000;
	padding:2px;
}

#leftColumn{
	width:200px;
	float:left;
	border:1px solid #000;

	padding:3px;
	height:200px;
}
#rightColumn{
	width:200px;
	float:right;
	margin:2px;
	height:400px;
}	
.dragableBox{
	width:100px;
	height:40px;
	margin-bottom:5px;
	padding:10px;
	font-weight:bold;
	text-align:center;
}
.dropBox{
	width:190px;
	border:1px solid #000;
	height:200px;
	margin-bottom:10px;
	padding:3px;
	overflow:auto;
}		
a{
	color:#F00;
}

.clear{
	clear:both;
}
img{
	border:0px;
}

 

Thanks a lot

Link to comment
Share on other sites
dc_jt Advanced Member

dc_jt

Posted
  • Author
Posted

Sorry ignore that previous post, ive tried a new method. This time I can get it to drag and drop, however when I drop, the image increases in size. Also, how can I get it to remove the cookie from where I dragged it from? At the moment, I drag it, it drops and stays in correct place (this is when the size increases) but it also flies back to where it came from?

 

I have cut out most of the code which isnt relevant:

 

<script type="text/javascript" src="/assets/js/prototype.js"></script>
<script type="text/javascript" src="/assets/js/scriptaculous.js"></script>
<script type="text/javascript" src="/assets/js/image.js"></script>

</head>
<style type="text/css">

#cookie_box {
	margin: 15px;
	width: 13em;
	height: 18em;
}

#cookie_box.hoverclass {
	background: #FOO;
}

</style>

                                <div id="cookie_box">
                                </div> <!-- cookie_box -->
                               
                                <script type="text/javascript">
	//<![CDATA[
	Droppables.add("cookie_box",{accept:'items', hoverclass:'hoverclass',onDrop:function(element)
	{new Ajax.Updater('items', '/scripts/add_item.scr.php',{asynchronous:true,evalScripts:true,method:'post',parameters:'id=' + encodeURIComponent(element.id)}),get_image_by_id('cookie_box', element.id)}
	} )
	//]]>
</script>

                               
                    <h1>Choose your Cookies</h1>
                    <div class="cookie-start-tray">
                    <img id="item_1" class="items"  src="../assets/images/cookie.gif" />
                    <script type="text/javascript">
				//<![CDATA[
				new Draggable("item_1", {revert:'true'})
				//]]>
				</script>
                    <img id="item_2" class="items"  src="../assets/images/cookie.gif" />
                    <script type="text/javascript">
				//<![CDATA[
				new Draggable("item_2", {revert:'true'})
				//]]>
				</script>
                    <img id="item_3" class="items"  src="../assets/images/cookie.gif" />
                    <script type="text/javascript">
				//<![CDATA[
				new Draggable("item_3", {revert:'true'})
				//]]>
				</script>
                    
                 

Link to comment
Share on other sites
dc_jt Advanced Member

dc_jt

Posted
  • Author
Posted

Right, Ive figured out why the size of the image is going bigger, its because the style on the cookie_box div is set to width: 13em;

height: 18em;

 

However, if I decrease this then the size of the box where I drop the images descreases.

 

How can I get the div to stay the same size and when I drop the cookie, the cookie stays its original size?

Link to comment
Share on other sites
dc_jt Advanced Member

dc_jt

Posted
  • Author
Posted

Right, Ive figured out why the size of the image is going bigger, its because the style on the cookie_box div is set to width: 13em;

height: 18em;

 

However, if I decrease this then the size of the box where I drop the images descreases.

 

How can I get the div to stay the same size and when I drop the cookie, the cookie stays its original size?

 

Looking further into it, it looks like when the script is run, it add a width="50%" on the image?

 

Any idea why??

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.