Monkuar

It's because $query = "select username from member";Isn't checking against a username, you need to specify WHERE username = ? I'm sure that's why you havn't had $unameErr = "* Username already in use. Please choose another."; firing and you're receiving duplicates? New code: (I updated the new query = WHERE username and added mysql_real_escape_string to it. I also tabbed the code a bit to make it look nice. Let me know how this goes: <?php if (empty($_POST["uname"])) { $unameErr = "* Username is required"; } else { $uname = test_input($_POST["uname"]); if (!preg_match("/^[a-zA-Z0-9]*$/",$uname)) { $unameErr = "* Only letters and numerals are allowed"; } else { // Now sure the username is legit, we check to see if it's a // unique username by comparing it to all usernames already in member table. require_once 'login.php'; // This file contains database access credentials $db_conn = new mysqli($db_hostname, $db_username, $db_password, 'login'); if($db_conn->connect_error) die ('Connect Error: ('.$db_conn->connect_errno.')'.$db_conn->connect_error); $query = 'select username from member WHERE username = \''.mysql_real_escape_string($uname).'\' LIMIT 1'; // Only selecting the field to compare to $result = $db_conn->query($query); if(!$result) die ('Database access failed: ('.$db_conn->connect_errno.')'.$db_conn->connect_error); $rows = $result->num_rows; for($i = 0; $i <= $rows; $i++) { if(mysqli_fetch_assoc($result) == $uname) { $unameErr = "* Username already in use. Please choose another."; mysql_close($db_conn); exit; } } if (empty($unameErr)){ // Make sure unameErr is empty (no errors) before submitting the data. $query = "insert into member values(NULL, '$uname', '$pwd1', '$fname', '$lname')"; $result = $db_conn->query($query); if(!$result) die ("Database insertion failed: ".mysql_error()); } } } ?>.. and Shitty IPB forum software doesn't save tabbed code, what a joke. Oh well. Sorry >_> Edit: Oh it does save it when you turn off the editing feature.. lol

I'm sure you'll do just fine with Javescript. Heard it works perfectly, being you know, case insensitive and whatnot.

Wrote some beautiful code (well that can be subjective). But to me anyways, this code checks if the item is placed on a box and that if the dimensions of the item will overlap the outside container = Out of bounds: csz= tempitemdata.getAttribute('slot-size'); sgo = parseInt( this.getAttribute('data-slot') ); if (csz[2]> 1){ // Bottoms Rows Disabled X Positions for (e=0; e < slots; e++){ limitX=(csz[2])? (csz[2]*9-9):0; if(sgo > ( slots - limitX ) ){ notify('Item out of bounds ~ '); return; } } }if (csz[0] == 2){ // 0,2++ Bottoms Rows Disabled Y Positions multi = new Array,c=0; while(c<slots){ multi.push( 9 * c); c++; } if(multi.indexOf(sgo)!=-1){ notify('Item out of bounds ~ '); return; } } I love the indexOf short hand function. It's literally insane. It's not EXACTLY like the in_array function in php, but it's pretty damn close. As you can see on this code. I'm pushing my multi array of multiples of 9. So if the slot_Size of an item is 1x2 or greater, it checks down the Y row every 9th slot. And if a user trys to put an item at that slot they cannot because the width would be out of bounds. I just need a good way to do this serverside now. I guess I'll convert the code above into php and check it against the database too. The issue is... the padding or SCOPE of items dimensions need to be checked dynamically so they don't overlap.... This can be done clientside with javascript, but serverside, I'm not too sure. mac_quer posted some code to help, but his code didn't check the dimensions of an item (padding). In any event. I'm only going to have 1x3, 1x2 and 1x1 dimensions and 2x2 (For armor) right now. I'll have a reset button in the inventory to clear the slots if we got script kiddies playing with live HTTP headers trying to fool around with item positioning though, so I'll be fine. The user experience will still be 99% working just like Path of Exile and Diablo 2! I am extremely happy! I scratched interactJS too! I'm just using basic Diablo 2 inventory movement with basic javascript: hasitem=0; tempitemdata = 0; tempitemdata2 = 0; slots = 99; function checkinventory(){ ibox = qsa('.InventoryTest'); for(i=0; i < ibox.length; i++){ ibox[i].onclick=function(){ //console.log( tempitemdata ); if(hasitem == 1){ /* if (this.childNodes[1]){ //swap? console.log(tempitemdata); this.childNodes[1].style.display='none'; tempitemdata.style.display='inline-block'; this.appendChild(tempitemdata); tempitemdata=this.childNodes[1]; setTimeout(function(){ hasitem = 1; }, 100); qs('#InventoryWindow').style.cursor="url("+this.childNodes[1].getAttribute('item-image')+"),auto"; return; } */ if (this.childNodes[1] || this.childNodes[0]){ hasitem = 0; tempitemdata.style.display='inline-block'; notify('An item already exists here.'); qs('#InventoryWindow').style.cursor="default"; return; } csz= tempitemdata.getAttribute('slot-size'); sgo = parseInt( this.getAttribute('data-slot') ); if (csz[2]> 1){ // Bottoms Rows Disabled X Positions for (e=0; e < slots; e++){ limitX=(csz[2])? (csz[2]*9-9):0; if(sgo > ( slots - limitX ) ){ notify('Item out of bounds ~ '); return; } } }if (csz[0] == 2){ // 0,2++ Bottoms Rows Disabled Y Positions multi = new Array,c=0; while(c<slots){ multi.push( 9 * c); c++; } if(multi.indexOf(sgo)!=-1){ notify('Item out of bounds ~ '); return; } } tempitemdata2.innerHTML=''; tempitemdata.style.display='inline-block'; if(hasitem == 1){ qs('#InventoryWindow').style.cursor="default"; setTimeout(function(){ hasitem = 0 }, 50); this.appendChild(tempitemdata); } } } } } iitems = qsa('.itemdrag'); for(i=0; i < iitems.length; i++){ iitems[i].onclick=function(){ if (hasitem == 0){ itemimage = this.childNodes[1].childNodes[1].src; this.style.display='none'; tempitemdata=this; tempitemdata2=this.parentNode; qs('#InventoryWindow').style.cursor="url("+itemimage+"),auto"; setTimeout(function(){ checkinventory(); hasitem = 1 }, 100); } } }It's awesome and intuitive in my opinion and works just like D3's. I can add more styling later to make it sexier, but for now it's fine. Gyzo makes the images upon clicking really weird, ignore that. But your cursor changes to the item itself upon clicking, it's just like D2's, so awesome! I am so happy too!! So lightweight no interactJS, or plugins. Love it.

You'll have to use some type of session handler. Some options: build your own (session_set_save_handler) or use extensions that provide their own session handler, like memcached.

Good. I made it so every slot is droppable when the user starts to drag the item (green background) [ Although, will not show it when we go live because like you said, the user can already see where to place it because of the borders and boxes]. Then, when the user drops the elements, just check to see if it overlaps, and if it does, revert the image back to the original position, right? That's what I'm doing now, it's just going to be hard because if an item is 2x2, and a user is moving a item that is 1x1, it will only revert if the user tries to drag it on the 1x1 of the 2x2 slot. If that makes sense. For example, let me show u: I need to DETECT the padding around an image based on their dimensions and fill in the appropiate boxes below: For example.. That belt has the dimensions 2x1 2width and 1 height. I need to edit the <div class="InventoryTest"> classes with a "PADDING" that is one to the right of the item, so it will revert back on my image instead. It's reverting back if it checks if their is a parent node on that InventoryTest (And there is it's the belt), but the BELT is only in 1 SLOT, but has 2boxes of an dimension. There is essentially a false position slot. How do I creating a PADDING around the box slots (InventoryTest divs) via the DOM? TLDR.. All items are essentially in 1 SLOT position. 1,100 (I have 99 slots). But if an image is in 1 SLOT that is 2x WITH, it's actually taking up 2 HORIZONTAL slots, but the slot next to it, isn't actually holding any data.. that's the problem. I need to HAVE A PADDING around them based on their dimensions. So if that belt is in slot position 60, it should be taking up 60 and 61. Because it's a width of 2. But it's only taking up position 60. I need some type of padding function / formula. But it's not, because it's 1 item in 1 slot and the image is just showing it like because it's 55px horizontal.

Well yeah. Because your local web dev browser doesn't have a built in php mail function! Unless, ofcourse, you have a mail server setup on localhost. What error are you getting? Try to take out that echo, and put whatever you want to echo out in the welcome.html page instead

Your issue is not having error checking. Here is your new code: <!DOCTYPE html> <html> <head> <title>DFW Information Technologies</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="generator" content="Bluefish 2.2.5" > <meta name="author" content="Landslyde" > <meta name="date" content="2015-01-25T17:49:28-0600" > <meta name="copyright" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="expires" content="0"> <link href="style/index.css" rel="stylesheet"> <!--[if lt IE 9]> <script scr="html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <h1>DFW Information Technologies</h1> <img class="img1" src="images/blue_world.jpeg" width="225" height="225"> <div class="gradientbuttons"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="services.html">Services</a></li> <li><a href="register.php">Register</a></li> <li><a href="client.php">Client Area</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> <?php error_reporting(E_ALL | E_NOTICE); ini_set('display_errors', '1'); $fnameErr = $lnameErr = $emailErr = $unameErr = $pwd1Err = $pwd2Err = ""; $fname = $lname = $email = $uname = $pwd1 = $pwd2 = ""; if ($_SERVER["REQUEST_METHOD"] == "POST") { if (empty($_POST["fname"])) { $fnameErr = "* First name is required"; } else { $fname = test_input($_POST["fname"]); if (!preg_match("/^[a-zA-Z]*$/",$fname)) { $fnameErr = "* Only letters are allowed"; } } if (empty($_POST["lname"])) { $lnameErr = "* Last name is required"; } else { $lname = test_input($_POST["lname"]); if (!preg_match("/^[a-zA-Z]*$/",$lname)) { $lnameErr = "* Only letters are allowed"; } } if (empty($_POST["email"])) { $emailErr = "* Email is required"; } else { $email = test_input($_POST["email"]); if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $emailErr = "* Invalid email format"; } } if (empty($_POST["uname"])) { $unameErr = "* Username is required"; } else { $uname = test_input($_POST["uname"]); if (!preg_match("/^[a-zA-Z0-9]*$/",$uname)) { $unameErr = "* Only letters and numerals are allowed"; } } if (empty($_POST["pwd1"])) { $pwd1Err = "* Password is required"; } else { $pwd1 = test_input($_POST["pwd1"]); } if (empty($_POST["pwd2"])) { $pwd2Err = "* Password confirmation is required"; } else { $pwd2 = test_input($_POST["pwd2"]); if($pwd1 != $pwd2) { $pwd2Err = "* Passwords do not match"; } } if ( empty($pwd2Err) && empty($pwd1Err) && empty($unameErr) && empty($emailErr) && empty($lnameErr) && empty($fnameErr) ){ // Good to go $to = $email; // this is your Email address $from = "verify@dfwit.co"; // this is the sender's Email address $subject = "Form submission"; $message = $fname . ":\n\n" . "Thank you for subscribing to DFW Information Technologies database services.\n\nYour login credentials are:\n\nUsername: ".$uname."\nPassword: ".$pwd1."\n\nPlease click the link below to proceed to Login screen:\n\nhttp:www.dfwit.co/index.html\n\n\n\nTech Support: techsupport@dfwit.co\nSales: sales@dfwit.co"; $headers = "From:" . $from; mail($to,$subject,$message,$headers); echo "Mail Sent. Thank you " . $fname . ", we will contact you shortly."; header("Location: www.dfwit.co/index.html"); // I put this in but it won't redirect until the mail // This is a personal problem. If your email server is slow, that's too bad lol. } } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } ?> <form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>"> <input type="text" name="fname" placeholder="First Name" value="<?php if (isset($_POST['fname'])) { echo $fname; } ?>"> <span class="error"> <?php echo $fnameErr;?></span><br><br> <input type="text" name="lname" placeholder="Last Name" value="<?php if (isset($_POST['lname'])) { echo $lname; } ?>"> <span class="error"> <?php echo $lnameErr;?></span><br><br> <input type="text" name="email" placeholder="E-mail Address" value="<?php if (isset($_POST['email'])) { echo $email; } ?>"> <span class="error"> <?php echo $emailErr;?></span><br><br> <input type="text" name="uname" placeholder="Username" value="<?php if (isset($_POST['uname'])) { echo $uname; } ?>"> <span class="error"> <?php echo $unameErr;?></span><br><br> <input type="password" name="pwd1" placeholder="Password" value="<?php if (isset($_POST['pwd1'])) { echo $pwd1; } ?>"> <span class="error"> <?php echo $pwd1Err;?></span><br><br> <input type="password" name="pwd2" placeholder="Confirm Password" value="<?php if (isset($_POST['pwd2'])) { echo $pwd2; } ?>"> <span class="error"> <?php echo $pwd2Err;?></span><br><br> <input type="submit" value="Submit"></button> </form> </body> </html>The email 'lag' you receive is a personal issue. If your email server is slow, that's too bad lol. Hope this helps. Also, put this: echo "Mail Sent. Thank you " . $fname . ", we will contact you shortly.";At the welcome.html page. They won't see that echo.

I've think I actually pushed javascript to the limits where what I'm trying to do isn't even actually feasible. I'm using interactJS for drag and drop. Upon the drag event, I simply call a function to make 1x2 div's inside the inventory. (For places for the sword to be placed). The limitation is: Watch the last 2 seconds of this gif. It's impossible to have it be placed at position X1, Y1. Edit: This is the code to loop through all the boxes and show the green placeholder. itest = qsa('.iBoxes2'); itemtype = event.target.getAttribute('slot-size'); console.log(' Width: '+itemtype[0]+' | Height: '+itemtype[2]+' '); iwidth=(itemtype[0]*25.5); iheight=(itemtype[2]*24.5); console.log(iwidth); counter=0; for(i=0; i < itest.length; i++){ cslot = itest[i].getAttribute('data-slot'); if ( counter % 2 ==0 && cslot != 9 && cslot != 18 && cslot != 27 && cslot != 36 && cslot != 45 && cslot != 54 && cslot != 63) { itest[i].style.position='relative'; itest[i].style.display="inline-block"; itest[i].style.width=""+iwidth+"px"; itest[i].style.background='#D8FFDA'; itest[i].style.height=""+iheight+"px" } counter++; }qsa is function qsa(e){return document.querySelectorAll(e)}

Ya forgot a semi colon lol. Welcome !

Isn't the item identified in the array though? $item = array('id'=>5,'w'=>5,'h'=>5); // define a 'test' item $grid[1][2] = 5; // put an item in the grid (value is the item's id, 0 = empty, not used as an id value) var_dump(test_pos(1,3,$item,$grid)); Yeah, the existing item in the grid is x=1, y=2, but it's defined in the $item=array with width=5, h=5. not w=1, h=1. Where did u get w=1, h=1 from?

Okay. I found an issue in the code: // example usage - $item = array('id'=>5,'w'=>5,'h'=>5); // define a 'test' item $grid[1][2] = 5; // put an item in the grid (value is the item's id, 0 = empty, not used as an id value) var_dump(test_pos(1,3,$item,$grid));This returns 1 (String OK) which it shouldn't.Because if you have an item at location 1,2 and the item id is 5. The WIDTH of that item is 5 ('w'=>5). So 1,3 should be overlapping. 1,4 too, 1,5, 1,6, and 1,7. 1,8 is a free spot (But then it would be outof bounds). Also: I added this to display the grid: foreach ($grid as $widthbox => $heightbox){ // Grid layout: foreach($heightbox as $heightgrid => $item){ $counter++; if ($item['id'] == $i){ // Trying to display the item based on it's width and height values ( How many boxes to take up! ?? ) // We have a match. $i = $item['id']; $w = $item['w']; $h = $item['h']; echo '<div class="InventoryTest" title="'.$counter.'"> '.$item.'</div>'; }else{ echo '<div class="InventoryTest" title="'.$counter.'"> '.$item.'</div>'; } } }The problem is, if a item's width is 5 boxes, I cannot seem to make it a 'block' and take up those corresponding 5 blocks horizontally. css for everything is: <style> .fadeIn{animation-name:fadeIn;-webkit-animation-name:fadeIn;animation-duration:.7s;-webkit-animation-duration:.7s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible!important}@keyframes fadeIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@-webkit-keyframes fadeIn{0%{-webkit-transform:scale(0);opacity:0}60%{-webkit-transform:scale(1.1)}100%{-webkit-transform:scale(1);opacity:1}} .InventoryTest{ border:1px solid #D3D3D3;border-bottom:0;width:24px;height:24px;float:left;padding:3px;border-right:0; } .itemdrag{position:relative;z-index:1} .InventoryTest:nth-child(9n+9){ border-right:1px solid #D3D3D3 } .InventoryTest:nth-last-child(-n+9){ border-bottom:1px solid #D3D3D3; } .itemdrag{position:relative;z-index:1} </style> <?php error_reporting(E_WARNING); // origin is top, left - 1,1 (x,y) // define grid size $max_x = 9; // across $max_y = 9; // down // create empty grid - $x = range(1,$max_x); $y = range(1,$max_y); $grid = array(); foreach($x as $xx){ foreach($y as $yy){ $grid[$xx][$yy] = 0; } } // for any requested x,y position, determine if the $item can be placed starting at that position in the grid // inputs - $x,$y - requested position // $item - item definition array(id, width, height) // $grid - the grid holding existing items // processing - test starting at the requested position if the item fits within the grid boundary and that all the corresponding cells are empty // return - 1 if the item can be placed at the requested position, 2 if out of bounds, 3 if overlap another item define('POS_OK', 'OK'); define('POS_OUTOFBOUNDS', 'OUT OF BOUNDS'); define('POS_OVERLAP', 'OVERLAP'); function test_pos($x,$y,$item,$grid){ $w = $x + $item['w'] - 1; // highest width $h = $y + $item['h'] - 1; // highest height // check if out of bounds if(!isset($grid[$x]) || !isset($grid[1][$y]) || !isset($grid[$w]) || !isset($grid[1][$h])){ return POS_OUTOFBOUNDS; } // check if overlap for($xx = $x; $xx <= $w; $xx++){ for($yy = $y; $yy <= $h; $yy++){ if($grid[$xx][$yy] != 0){ return POS_OVERLAP; } } } return POS_OK; } // example usage - $item = array('id'=>5,'w'=>5,'h'=>5); // define a 'test' item $grid[1][1] = 5; // put an item in the grid (value is the item's id, 0 = empty, not used as an id value) var_dump(test_pos(1,3,$item,$grid)); ?> <div style="width:310px" id="InventoryContainer" onmouseleave="qs('#InventoryContainer').style.cursor='default'"> <?php foreach ($grid as $widthbox => $heightbox){ // Grid layout: foreach($heightbox as $heightgrid => $item){ $counter++; if ($item['id'] == $i){ // Trying to display the item based on it's width and height values ( How many boxes to take up! ?? ) // We have a match. $i = $item['id']; $w = $item['w']; $h = $item['h']; echo '<div class="InventoryTest" title="'.$counter.'"> '.$item.'</div>'; }else{ echo '<div class="InventoryTest" title="'.$counter.'"> '.$item.'</div>'; } } } ?> </div>

PHPBB3 does it. I crafted it on my own forum too. Why not have it here? Code is being posted daily. https://www.phpbb.com/community/viewtopic.php?p=5655675#p5655675 See it in action? That would be usefull here instead of dragging and highlighting our mouse over the code and pressing CTRL+C. If IPB has a custom BBCODE manager, you could just use the code in their topic @Phillip.

This might be a Godsend, but requinex pm'd me with some guidelines and an overhow on how to do it. I'm going to try to spend all today figuring this out on my own instead of just copying your code. I feel like I would be cheating myself, and that's not right. I will spend all day today, and if nothing prevails I'll use this as a startup. Marked as best answer, thank you mac. Requinex told me it should be 0,0 as top left. Now you're saying it should be 1,1. Life is confusing lol, haha. I need to get away from the house and just do this I know I can

I'm going to MAKE this task very simple for you. I am just not that experienced with php yet to conquer this specific task. Let me get you started with some examples of how easy the client side of this is. Copy and paste this and run it as index.php on your dev server: <script src="http://code.interactjs.io/interact-1.2.2.min.js"></script> <script> function qs(expr){return document.querySelector(expr)} </script> <style> .fadeIn{animation-name:fadeIn;-webkit-animation-name:fadeIn;animation-duration:.7s;-webkit-animation-duration:.7s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible!important}@keyframes fadeIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@-webkit-keyframes fadeIn{0%{-webkit-transform:scale(0);opacity:0}60%{-webkit-transform:scale(1.1)}100%{-webkit-transform:scale(1);opacity:1}} .InventoryTest{ border:1px solid #D3D3D3;border-bottom:0;width:24px;height:24px;float:left;padding:3px;border-right:0; } .itemdrag{position:relative;z-index:1} .InventoryTest:nth-child(9n+9){ border-right:1px solid #D3D3D3 } .InventoryTest:nth-last-child(-n+9){ border-bottom:1px solid #D3D3D3; } .itemdrag{position:relative;z-index:1} </style> <?php error_reporting(E_ERROR); //Display 63 boxes (Fits with the css nth-child tags to look pretty! lol) for($i = 1; $i < 64; $i++){ if ($i == 1){ // Slot positions 1 Dimensions: 3x3 (lengthXwidth) $item1 = '<div class="itemdrag" item_id='.$i.' data-cslot='.$i.'><img src=http://i.imgur.com/3azYLNf.png></div>'; }elseif($i==4){ // Slot position 2 Dimensions 2x1 lengthXwidth) $item1 = '<div class="itemdrag" item_id='.$i.' data-cslot='.$i.'><img src=http://i.imgur.com/l3y0W7d.png></div>'; }else{$item1 = '';} $inventoryboxes .= '<div class="InventoryTest" data-slot='.$i.'>'.$item1.'</div>'; } ?> <div style="width:300px"> <?php echo $inventoryboxes ?> </div> <script> // target elements with the "draggable" class interact('.itemdrag') .draggable({ // enable inertial throwing inertia: true, onstart: function (event) { }, // call this function on every dragmove event onmove: function (event) { var target = event.target, // keep the dragged position in the data-x/data-y attributes x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; // translate the element target.style.position = "relative"; target.style.zIndex="2500"; target.style.webkitTransform = target.style.transform ='translate(' + x + 'px, ' + y + 'px)'; // update the posiion attributes target.setAttribute('data-x', x); target.setAttribute('data-y', y); }, // call this function on every dragend event onend: function (event) { var target = event.target; target.removeAttribute("style"); target.removeAttribute("data-x"); target.removeAttribute("data-y"); } }); interact('.InventoryTest').dropzone({ // only accept elements matching this CSS selector accept: '.itemdrag', // Require a 75% element overlap for a drop to be possible overlap: 0.40, // listen for drop related events: ondropactivate: function (event) { var draggableid = event.relatedTarget; // add active dropzone feedback // Is this and item that can be equipped? if (event.relatedTarget.getAttribute('item-type') != "Misc"){ //qs('#shadow'+draggableid.getAttribute('item-type')+'').style.display='none'; } event.target.classList.add('drop-ACCEPT'); }, ondragenter: function (event) { var draggableElement = event.relatedTarget, dropzoneElement = event.target; // feedback the possibility of a drop dropzoneElement.classList.add('drop-target'); draggableElement.classList.add('can-drop'); //draggableElement.textContent = 'Dragged in'; }, ondragleave: function (event) { // remove the drop feedback style event.target.classList.remove('drop-target'); event.relatedTarget.classList.remove('can-drop'); //event.relatedTarget.textContent = 'Dragged out'; }, ondrop: function (event) { var dragid = event.relatedTarget; if (event.target.hasChildNodes()) { //console.log(event.target.childNodes[1]); return; } var slotp = event.target.getAttribute("data-slot"); var slotp2 = event.relatedTarget.getAttribute("data-cslot"); var shadowid = qs('#shadow'+dragid.getAttribute('item-type')+''); var item_id = event.relatedTarget.getAttribute("item_id"); // <-- The one being dragged //We need to show the shadow gear again. (shadowid) ? shadowid.style.display='inline-block': ''; qs('[data-slot="'+slotp2+'"]').innerHTML=''; qs('[data-slot="'+slotp+'"]').appendChild(event.relatedTarget); event.target.childNodes[0].setAttribute("data-cslot", slotp); //We do our ajax functions here, just log the information for now: console.log(" item_id="+item_id+"&slot_go="+slotp+" "); event.relatedTarget.className += ' fadeIn'; //console.log(event.relatedTarget); //console.log(event.target); //event.relatedTarget.textContent = 'Dropped'; }, ondropdeactivate: function (event) { // remove active dropzone feedback event.target.classList.remove('drop-ACCEPT'); event.target.classList.remove('drop-target'); } }); </script> Now, go there and drag and move the belt around in the inventory. They should update accordingly. Example: Press F12 and check your console. You should see upon each item being moved, it's logging their slot it was moved. What I need? I need this where items CANNOT overlap each other in the inventory. The items need to be piped from mysql and positioned to the appropriate position in the inventory. You need to be experienced in Javascript and PHP for this. InteractJS because if you check the example above, the armor is being dragged, but you cannot drop it on anything because interactjs doesn't know it's that big. If you look at Diablo 2's inventory system, and Path of Exile's or Diablo 3's, you can get an idea of what I'm looking for. Let me know if you're interested in this and what price. There is a field in my rpg_user_items table called slot_position and slot_size. slot_size represents the widthxheight of the item. (in this example and code above, it's 3x3 (armor) and 2x1 (belt).

Yeah, that's the problem I faced. I had to scratch this project and just go back to my original inventory system: I really want to do the inventory system like Path of Exile or Diablo 2's/3's. But the problem is. I cannot get the positions of the other items when moving the main item. (Well, I could, but I cannot do it dynamically) I added a field in my rpg_items table called slot_size and for the belt it was 2x1 (2 WIDTH, 1 HEIGHT), and slot position = 1. Then, I used explode to check the width and height of all the users inventory items But... the image is spanning across 2 blocks. So I just don't know how to read the image, so a user cannot put a item in slot position 2. But then, what if the item they are moving is 3x2? or 1x5? Too much algorithm / math involved that I could never really understand. What if the belt was 2x5? 2width and 5 blocks high? How do I check serverside if a user was putting an item on the XX slot? 5 blocks down would be in row 5, and slot number whatever. Just too much shit going on and I cannot do it. I'm sorry guys, failed you but this was too much. I am either wrong on the design process, or my knowledge is the bottleneck. I'm using interactJS to drag and drop though. So if anyone crafts this up, I'll pay around 50$. But other then that, I'm happy with my regular 1 slot moving inventory system.. well not really. I would really love a D2/Path of Exile feel... but too complicated atm. Time is Gold.