Home/ Questions/Q 7711555
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T01:24:20+00:00

OK. I will try to be as clear as possible and give my source

  • 0

OK. I will try to be as clear as possible and give my source code to try an help with what I am asking.

So I have these draggable elements which are pulled via a database that drag from one area to a droppable/sortable area. They are meant to be collected there so that the values they can be later submitted (emailed to me and the user). I’m trying to figure out how exactly how the code should be written in the forms so that way I am sure it will be picked up after it has been sorted the droppable area to send to an email.

here’s my code for reference (the send form aspect has not been implemented in anyway just a placeholder right now):
jsfiddle: http://jsfiddle.net/Matuduke/Y86As/ 

<style>

    .tooltip { position:fixed; top: 0;left: 0;z-index: 3; display: none;}

    #send {float:left; position:relative; }
    #column_en { float:inherit;}
    #webwall { float:left; width:48%; padding: 3px; max-height:340px; min-height:340px; }
    #collectborder { float:left; width:50%; min-height:340px; padding: 0px; }


    #staticwall li {cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important; list-style-type: none; margin: 6px 6px 6px 6px; padding: 1px; float: left; width: 84px; height: 144px; font-size:x-small; text-align: center; }

    #collection { list-style-type:none; min-height:340px; float:left; min-width:500px; border:dashed;background:#fff; height:30%; padding: .5% ; } * html #collecton { height: 0em; }
    #collection li { list-style-type:none; margin: 6px 6px 6px 6px; padding: 1px; float: left; width: 84px; height: 144px; font-size: 1em; text-align: center;}


    </style>
<script>
    $(function() {
        var removeIntent = false;
    $( "#collection").sortable({
     over: function () {
            removeIntent = false;
        },
        out: function () {
            removeIntent = true;
        },
        beforeStop: function (event, ui) {
            if(removeIntent == true){
                ui.item.remove();
                    }
                 }
        });
        $( "#collection").disableSelection();
            });

        $(document).ready(function() {
        var source;
        var destination;
        var fn = function(event, ui) {
            toDrop = $(ui.draggable).clone();
            if ($("#collection").find("li[uIdentity=" + toDrop.attr("uIdentity") + "]").length >= 0) {
                $("#collection").prepend(toDrop);
            }
            else
                return false;
        };
        $("#staticwall li, #collection li").draggable({
            helper: 'clone',
            hoverClass: "ui-state-default"
        });

        $("#collection").droppable({
            accept: "#staticwall li" ,
            drop: fn 
                    });
                });
            $("#staticwall li").setPos('0,0');
            $('#staticwall').tinyscrollbar();
        $(function() {

        $("#collection li").draggable({
            revert: true
                    });
                    });
        </script>
        </head>
        <body>       
        <div id="column_en">
        <div id="webwall">
           Choose the pieces to add to your collection:
    <ul style="overflow:auto;height:300px;animation-timing-function:ease-in-out;" id="staticwall" class="ui-state-default">

        <?php 
        mysql_connect('localhost','user,'pass');
        mysql_select_db("houstop9_Spiritiles");
        $result = mysql_query("SELECT thumb, title, quote, sku FROM spiritiles ORDER BY `spiritiles`.`sku` DESC LIMIT 0, 120");

        // print the list items
            while ($row = mysql_fetch_array($result)) {
            echo "<li uIdentity='1' class='ui-state-default'>{$row['thumb']}\n {$row['sku']}</li>";

                }
                ?>

        </ul>
            </div>


        <div>Create your Collection here: </div>
        <div  id="collectborder" >
        <ul id="collection" class="ui-state-default">
            </ul>
            <div id="send"><form>
            <input type="text" accept="">
            <input type="image" accept="">

                <input type='submit' name='submit' value='Send Tiles'></form> 
            </div> 

            </div>
            </div>

            </body>

EDIT:
ok i think i get what you’re saying but I’m not certain I understand the get method in JQuery. I’ve been trying make it run when i submit the form, but i think I’m fudging it all up: 

     function getSku() 
        var myIds = new array();
        $("#collection li").each(function(index, element){
           getSelection(index + ': ' + $(this).text());
           myIds.push(element.id);

            });
         }
         $("form").submit(getSku);
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    With jQuery you can iterate with .each() the elements of your dashed box, something like this:

    var myIds = new array();
$("#collection li").each(function(index, element){
  // get ids
  myIds.push(element.id);
});

    Then you have to make an array with the ids of your objects, and submit them. With PHP then you can send those ids via e-mail.

    EDIT
    In PHP when you create the li elements you have to do:

    echo "<li uIdentity='1' class='ui-state-default' id='{$row['sku']}'>";
echo "  {$row['thumb']}\n {$row['sku']}";
echo "</li>";

    I asume the sku is the primary key of your table. If not, the id property should reflect your primary key

    • 0