Jump to content

Drag and drop help

dc_jt

By dc_jt
in Javascript Help

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
https://forums.phpfreaks.com/topic/89397-drag-and-drop-help/
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
https://forums.phpfreaks.com/topic/89397-drag-and-drop-help/#findComment-459625
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
https://forums.phpfreaks.com/topic/89397-drag-and-drop-help/#findComment-459687
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
https://forums.phpfreaks.com/topic/89397-drag-and-drop-help/#findComment-459693
Share on other sites

Archived

This topic is now archived and is closed to further replies.

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.