SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    0 Post(s)
    0 Thread(s)

    Question jQuery drag & drop problem

    Hello everyone. My name is Mateusz (in english - Matthew), I come from Poland. I'm sorry in advance for my english, but I hope everyone will understand me and somebody will help me. I've got a problem with jQuery UI drag & drop. I'm creating a web page for my local volleyball club (never mind). I created simple website where I put players on pitch:


    On the left there is a table, where are names and surnames of players. On the right there's a pitch, on which I could change players.

    Second image show situation when I drag "John Terry" and replace him with "Garry Edison"

    Last image show when I drop "John Terry" on the place of "Garry Edison". As you see, on the pitch everything is ok. "John" has replaced "Garry"

    But the problem is on the left, in the table (I marked it). There is "Garry Edison" twice. Sometimes when I drag and drop another players nothing change in table. Now I'll show jQuery code:

    function change_line_up() {
    	var o_squad = new Array(); // squad in table
    	var n_squad = new Array(); // squad on the pitch
    	o_squad[1] = $('table.first-squad tbody tr.set td.number').attr('id'); // I get ID of player from table
    	o_squad[2] = $('table.first-squad tbody tr.rec1 td.number').attr('id'); //the same as over
    	// etc ...
    	id_help = $('table.tactics-players tbody tr td.set div.ui-droppable span.player-drag').attr('id').split('_');
    	n_squad[1] = new Array();
    	n_squad[1][1] = parseInt(id_help[1]);
    	n_squad[1][2] = $('table.tactics-players tbody tr td.set div.ui-droppable span.player-drag').attr("name");
    	id_help = $('table.tactics-players tbody tr td.r1 div.ui-droppable span.player-drag').attr('id').split('_');
    	n_squad[2] = new Array();
    	n_squad[2][1] = parseInt(id_help[1]);
    	n_squad[2][2] = $('table.tactics-players tbody tr td.r1 div.ui-droppable span.player-drag').attr("name");
    /* In this part of code I get the ID from div which is on the pitch (right).
        ID is like clone_1823, so I have to split it.
         eg. Terry on the left has html ID 1111 and Terry on the pitch has html ID clone_1111
    	for(i=1; i<8; i++) {
    		if(o_squad[i] != n_squad[i][1]) { // I check if after drop ID from table is different as ID from pitch
    			if(i == 1) {
    				$('table.first-squad tbody tr.set').html(n_squad[1][2]); // and replace
    				$('table.first-squad tbody tr.set td.number').attr('id', n_squad[1][1]);
    			else if(i == 2) {
    				$('table.first-squad tbody tr.rec1').html(n_squad[2][2]);				$('table.first-squad tbody tr.rec1 td.number').attr('id', n_squad[1][1]);
    I call this function after drop player on the pitch :

    $('table.tactics-players tbody tr td div, table.reserves-players tbody tr td div').droppable({           
          accept: "span.player-drag, td.number",
          activeClass: "bordered",
          hoverClass: "ui-state-active",
           drop: function( event, ui ) {
    HTML code:

    HTML Code:
    <td class="at"><div><img src="images/icons/tshirt2.png" /><br /><span class="player-drag" id="clone_352" name="Garry Edison">Garry<br />Edison<br />A</span></div></td>
    HTML Code:
    <tr class='atk'><td class='number' id='352' info='Garry<br />Edison<br />A'>4</td><td class='position'>A</td><td class='name'>Garry Edison</td></tr>

    I completely don't know why it doesn't work properly (sometimes it doesn't work at all as I said). I hope somebody will help me, I can write more things about my problems if it's necessary.

    I forgot to say: when I change players on the pitch, their's html IDs and names change properly, so I don't know why it doesn't replace players in table.

    Thank you in advance.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    219 Post(s)
    12 Thread(s)
    Hi there,

    Welcome to the forums

    Could you post a link to a page where I can see this in action?

  3. #3
    SitePoint Member
    Join Date
    Jul 2013
    0 Post(s)
    0 Thread(s)
    Ohh, thanks for your interest but I solved it

    My fault was in incorrect html IDs ... Stupid mistake.


Posting Permissions

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