Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Jquery help: drag and drop on spot

    Hi!

    I have a problem with my code so i decided that i will ask for help on this forum. Currently my code can sort items and drag and drop them to trash bin. What i want to do next is to create slots (which can hold <li>) on which i can drag one "item" (<li> elements) and store it there (ajax call send item ID to php from where i will than store it). For example i have weapon slot on which i can drag and store 1 weapon. If slot has already an item and you drag another item on it, items are switch, first one goes back to inventory, second one append to that (right spot) spot.
    Until now i managed to create that slots can receive only certain items. Can somebody with good knowledge of jquery help me continue with my code? I want to create something very similar to this: http://www.dannyvankooten.com/demo/i...-drop-with-db/ . Template engine i use is smarty template engine. Thank you in advance.

    Code:
    {include file="styles/templates/game/overall_header.tpl"}
    <script type="text/javascript" src="./scripts/base/dragdrop/jquery.min.js"></script>
    <script type="text/javascript" src="./scripts/base/dragdrop/jquery-ui.min.js"></script>
    
    <script type="text/javascript">
    jQuery(document).ready(function($){
    
    $(".namelist ").sortable({
       connectWith: '.namelist ul', 
       items: 'li',
       placeholder: "highlight",
       opacity: 0.9,
       revert:true,
    
      update : function(event, ui) {
          var request = $.ajax('processImage.php', { data : { order :  ui.item.parent().sortable('toArray') }}); 
      }
     });
    $("#deleteArea").droppable({
    accept: '.namelist > li',
    hoverClass: 'dropAreaHover',
    drop: function(event, ui) {
    deleteImage(ui.draggable,ui.helper);
    },
    activeClass: 'dropAreaHover'
    });
    function deleteImage($draggable,$helper){
    
      if(window.confirm("Are you sure you want to delete item?")){
               params = "PID=" + $draggable.attr('id');
            } else {
                return false;
            }
    
    $.ajax({
    url: 'deleteImage.php',
    type: 'POST',
    data: params,
    success: function(data) {
    alert("Item deleted");
    }
    });
    $helper.effect('transfer', { to: '#deleteArea', className: 'ui-effects-transfer' },500);
    $draggable.remove();
    }
    
    $(document).ready(function() {
    	$(".weapon,.armor").draggable({ revert: 'invalid'});
    	$('.namelist').droppable();
    	$("#slot1").droppable({ accept: '.weapon'})
    	$('#slot2').droppable({ accept: '.armor'});
    	$('#slot1,#slot2,.namelist').bind('drop', function(ev,ui) { itemInSpot(ui.draggable,this); });
    });
    
    function itemInSpot(drag_item,spot)
    {
    	
    }
    
    
    });
    
    </script>
    <table id="content" width=90%>
    <th colspan=8>{lang}it_used_slots{/lang} <font color=lime>{$inventory_slots}/{$inventory_max}</font></th>
    
    
    <tr><td style="border:none" rowspan=8 width=100px><img src="styles/images/trash.png" width=120px height=120px id="deleteArea"></td>
    <td style="border:none">
    <ul class="namelist">
    {foreach name=items item=itemsRow from=$items} // loop that goes through array of items
    {$ID = $itemsRow}
    
    <li class="{$ID.item_type}" id={$ID.item_row}>
    <img class="movable" src="./styles/images/items/{$ID.item_desc_id}.gif" height=80px width=80px><br/>
    <font color=orange><n onclick="return Dialog.info({$ID.item_desc_id})">{$ID.item_name}</n></font><br/>{lang}bd_lvl{/lang}: {$ID.item_level}
    </li>      // item
    
    
    
    {/foreach}
    
    </ul>
    </td></tr><tr><ul><td style="border:none" rowspan=8 width=100px><li id="slot1"><img src="styles/images/trash.png" width=120px height=120px ></li>    //two item spot's
    																<li id="slot2"><img src="styles/images/trash.png" width=120px height=120px ></li></td></ul></tr>
    </table>
    
    
    
    
    {include file="styles/templates/game/overall_footer.tpl"}
    Last edited by VIPStephan; 03-19-2013 at 07:09 PM. Reason: added code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,622
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.
    Ok i will next time. Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •