Home
![[PHP] Get input from drag/drop box utk masukkan ke dlm database Empty](https://2img.net/i/empty.gif)
Assalamualaikum...
Saya memerlukan bantuan utk code bagi drag/drop box dlm PHP...
Saya ada 4 kotak option yang akan ditarik dan diletakkan ke dlm kotak jawapan , dan nilai di dlm kotak jawapan itu akan disimpan di dlm database.
Ni code PHP utk drag/drop box menggunakan div, setahu saya div x leh digunakan utk masukkan data ke dlm database
Ni code utk javascript
Saya memerlukan bantuan utk code bagi drag/drop box dlm PHP...
Saya ada 4 kotak option yang akan ditarik dan diletakkan ke dlm kotak jawapan , dan nilai di dlm kotak jawapan itu akan disimpan di dlm database.
Ni code PHP utk drag/drop box menggunakan div, setahu saya div x leh digunakan utk masukkan data ke dlm database
- Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<title>Demo 2: Drag and drop</title>
<?
$keywords = "Drag and drop script,DHTML drag and drop,drag,drop";
@include($_SERVER['DOCUMENT_ROOT']."/config/metatags.inc");
?>
<link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
<style type="text/css">
/* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
#mainContainer{
width:600px;
margin:0 auto;
margin-top:10px;
border:1px solid #000;
padding:2px;
}
#leftColumn{
width:300px;
float:left;
border:1px solid #000;
background-color:#E2EBED;
padding:3px;
height:400px;
}
#rightColumn{
width:200px;
float:right;
margin:2px;
height:400px;
}
.dragableBox{
width:100px;
height:40px;
border:1px solid #000;
background-color:#FFF;
margin-bottom:5px;
padding:10px;
font-weight:bold;
text-align:center;
}
.dropBox{
width:190px;
border:1px solid #000;
background-color:#E2EBED;
height:400px;
margin-bottom:10px;
padding:3px;
overflow:auto;
}
a{
color:#F00;
}
.clear{
clear:both;
}
img{
border:0px;
}
</style>
<script type="text/javascript" src="js/drag-drop-custom.js"></script>
</head>
<body>
<div id="header"><a href="/index.html"><img src="/images/heading3.gif"></a></div>
<div id="mainContainer">
<h2>Drag and drop - demo 2</h2>
<div id="leftColumn">
<p><b>Drop some boxes on me</b></p>
<div id="dropContent">
<div class="dragableBox" id="box1">CAT</div>
<div class="dragableBox" id="box2">DOG</div>
<div class="dragableBox" id="box3">HORSE</div>
<div class="dragableBox" id="box4">TIGER</div>
</div>
</div>
<div id="rightColumn">
<div id="dropBox" class="dropBox">
<p><b>Drop some boxes on me</b></p>
<div id="dropContent2"></div>
</div>
</div>
<div class="clear"></div>
<div class="konaBody">
<a href="#" onclick="dragDropObj.setSlide(true);return false">Activate sliding animation</a> | <a href="#" onclick="dragDropObj.setSlide(false);return false">Deactivate sliding animation</a>
</div>
</div>
<div id="debug"></div>
<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>
Ni code utk javascript
- Code:
var standardObjectsCreated = false; // The classes below will check this variable, if it is false, default help objects will be created
var clientInfoObj; // Object of class DHTMLgoodies_clientInfo
var dhtmlSuiteConfigObj = false; // Object of class DHTMLgoodies_config
var dhtmlSuiteCommonObj; // Object of class DHTMLgoodies_common
// {{{ DHTMLgoodies_createStandardObjects()
/**
* Create objects used by all scripts
*
* @public
*/
function DHTMLgoodies_createStandardObjects()
{
clientInfoObj = new DHTMLgoodies_clientInfo(); // Create browser info object
clientInfoObj.init();
if(!dhtmlSuiteConfigObj){ // If this object isn't allready created, create it.
dhtmlSuiteConfigObj = new DHTMLgoodies_config(); // Create configuration object.
dhtmlSuiteConfigObj.init();
}
dhtmlSuiteCommonObj = new DHTMLgoodies_common(); // Create configuration object.
dhtmlSuiteCommonObj.init();
}
// {{{ DHTMLgoodies_config()
/**
* Constructor
*
* @public
*/
function DHTMLgoodies_config()
{
var imagePath; // Path to images used by the classes.
var cssPath; // Path to CSS files used by the DHTML suite.
}
DHTMLgoodies_config.prototype = {
// {{{ init()
/**
*
* @public
*/
init : function()
{
this.imagePath = 'images_dhtmlsuite/'; // Path to images
this.cssPath = 'css_dhtmlsuite/'; // Path to images
}
// }}}
,
// {{{ setCssPath()
/**
* This method will save a new CSS path, i.e. where the css files of the dhtml suite are located.
*
* @param string newCssPath = New path to css files
* @public
*/
setCssPath : function(newCssPath)
{
this.cssPath = newCssPath;
}
// }}}
,
// {{{ setImagePath()
/**
* This method will save a new image file path, i.e. where the image files used by the dhtml suite ar located
*
* @param string newImagePath = New path to image files
* @public
*/
setImagePath : function(newImagePath)
{
this.imagePath = newImagePath;
}
// }}}
}
/************************************************************************************************************
* A class with general methods used by most of the scripts
*
* Created: August, 19th, 2006
* Purpose of class: A class containing common method used by one or more of the gui classes below,
* example: loadCSS.
* An object("dhtmlSuiteCommonObj") of this class will always be available to the other classes.
* Update log:
*
************************************************************************************************************/
// {{{ DHTMLgoodies_common()
/**
* Constructor
*
*/
function DHTMLgoodies_common()
{
var loadedCSSFiles; // Array of loaded CSS files. Prevent same CSS file from being loaded twice.
}
DHTMLgoodies_common.prototype = {
// {{{ init()
/**
* This method initializes the DHTMLgoodies_common object.
*
* @public
*/
init : function()
{
this.loadedCSSFiles = new Array();
}
// }}}
,
// {{{ getTopPos()
/**
* This method will return the top coordinate(pixel) of an object
*
* @param Object inputObj = Reference to HTML element
* @public
*/
getTopPos : function(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML'){
returnValue += inputObj.offsetTop;
if(document.all)returnValue+=inputObj.clientTop;
}
}
return returnValue;
}
// }}}
,
// {{{ getLeftPos()
/**
* This method will return the left coordinate(pixel) of an object
*
* @param Object inputObj = Reference to HTML element
* @public
*/
getLeftPos : function(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null){
if(inputObj.tagName!='HTML'){
returnValue += inputObj.offsetLeft;
if(document.all)returnValue+=inputObj.clientLeft;
}
}
return returnValue;
}
// }}}
,
// {{{ cancelEvent()
/**
*
* This function only returns false. It is used to cancel selections and drag
*
*
* @public
*/
cancelEvent : function()
{
return false;
}
// }}}
}
/************************************************************************************************************
* Client info class
*
* Created: August, 18th, 2006
* Purpose of class: Provide browser information to the classes below. Instead of checking for
* browser versions and browser types in the classes below, they should check this
* easily by referncing properties in the class below. An object("clientInfoObj") of this
* class will always be accessible to the other classes.
* Update log:
*
************************************************************************************************************/
