Drag & Drop Input Boxes in Jquery

I got the following code. I can drag and drop Input boxes. However I want to drop the value of the inputbox. see below:

    $(window).load(function() {
        $(function() {
            var arrV2 = [];
            $("#catalog").accordion();
            $("#catalog li").draggable({
                appendTo: "body",
                helper: "clone"
            });
            $("#cart ol").droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                accept: ":not(.ui-sortable-helper)",
                drop: function(event, ui) {
                    $(this).find(".placeholder").remove();



                    var testString = $("#txtSchemeName").val();
                    alert($("#txtSchemeName").val());
                    alert(testString);
                    
                    if (ui.draggable.text()) {
                        $("<li></li>").text(ui.draggable.text()).addClass("cart-item").appendTo(this);
                    } else {
                    $("<li></li>").text(this.testString).addClass("cart-item").appendTo(this);
                    }


                    //updatePostOrder();
                    //$("<li></li>").text(ui.draggable.value()).addClass("cart-item").appendTo(this);

                    //alert(document.getElementById('txtSchemeName').value);

                    arrV2.push(ui.draggable.text());
                    $('#postOrder').val(arrV2.join(','));
                    //$('#postOrderV2').val(arrV2.join(','));
                }
            }).sortable({
                items: "li:not(.placeholder)",
                sort: function() {
                    $(this).removeClass("ui-state-default");
                    //updatePostOrder();
                }
            });
            $("#catalog ul").droppable({
                drop: function(event, ui) {
                    $(ui.draggable).remove();
                    //updatePostOrder();

                    //var intRemove = $.inArray(ui.draggable.text, arrV2);
                    var intRemove = arrV2.lastIndexOf(ui.draggable.text());
                    arrV2.splice(intRemove, 1);
                    //$('#postOrderV3').val(intRemove);
                    //arrV2.pop(intRemove);
                    //arrV2.push(ui.draggable.text());
                    $('#postOrder').val(arrV2.join(','));
                    //$('#postOrderV2').val(arrV2.join(','));

                },
                hoverClass: "ui-state-hover",
                accept: '.cart-item'
            });

        });
    });

Open in new window



The main issue is the line below. The alert box gets the input box value. But doesnt pass it to the into the cart.

                var testString = $("#txtSchemeName").val();
                    alert($("#txtSchemeName").val());
                    alert(testString);
                    
                    if (ui.draggable.text()) {
                        $("<li></li>").text(ui.draggable.text()).addClass("cart-item").appendTo(this);
                    } else {
                    $("<li></li>").text(this.testString).addClass("cart-item").appendTo(this);
                    }

Open in new window


what I mean is
this works

                        $("<li></li>").text(ui.draggable.text()).addClass("cart-item").appendTo(this);

Open in new window


and this doesnt work, just drops a blank value below:

                    $("<li></li>").text(this.testString).addClass("cart-item").appendTo(this);

Open in new window

dipster307Asked:
Who is Participating?
 
dipster307Connect With a Mentor Author Commented:
done some googling and worked it out by adding the following code:

 $(window).load(function() {
    $("#txtProvider").keydown(function(e) {
        if (e.keyCode == 32) {
            $(this).val($(this).val() + " "); // append '-' to input
            return true; // return false to prevent space from being added
        }
    }); $(function() {
            var arrV2 = [];

Open in new window

0
 
Julian HansenCommented:
There is a missing bit here. You say the alert has the correct value but the alert is using an absolute reference of an element whereas the first part of the if is using the text of the dropped item. Try this and see what you get
                var testString = $("#txtSchemeName").val();
                    alert($("#txtSchemeName").val());
                    alert(testString);
                    alert(ui.draggable.text()); // Is this blank?
                    
                    if (ui.draggable.text() == "") { // specifically test for an empty string
                        $("<li></li>").text(ui.draggable.text()).addClass("cart-item").appendTo(this);
                    } else {
                    $("<li></li>").text(this.testString).addClass("cart-item").appendTo(this);
                    }

Open in new window

0
 
dipster307Author Commented:
I have made changes, this now works see below. However this has cause my input boxes to disable the spacebar.

I cant enter SPACES in my inputboxes. However it can drag & drop the value in the input box.

            $("#cart ol").droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                accept: ":not(.ui-sortable-helper)",
                drop: function(event, ui) {
                    $(this).find(".placeholder").remove();


//Input box 1 "txtSchemeName"
                    var stgSchemeName = $("#txtSchemeName").val();

//Input box 2 "txtProvider"
                    var stgProvider = $("#txtProvider").val();

                   var getDragObjectName = $("<li></li>").text(ui.draggable.text());
                    var dragObjectName = getDragObjectName;
                    var getDragObjectName = dragObjectName.text().trim();
 


                    if (dragObjectName == "txtSchemeName") {
                        $("<li></li>").text(stgSchemeName).addClass("cart-item").appendTo(this);
                   } else if (dragObjectName == "txtProvider") {
                        $("<li></li>").text(stgProvider).addClass("cart-item").appendTo(this);
                    }
                    else {
                        $("<li></li>").text(ui.draggable.text()).addClass("cart-item").appendTo(this);
                    }


               }

Open in new window

0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Julian HansenCommented:
I can't see anything here that is capturing keyboard input - is there other code on the page that might be causing this?
0
 
dipster307Author Commented:
The page is created in asp.net using master pages.

The page code below:

<div id="divMain" style="display:block;width:925px;height:950px;float:left;border:1px solid black;" runat="server">
    <div id="divLeft" style="display:block;width:160px;height:500px;float:left;border:1px solid black;" runat="server">
	    <h1 class="ui-widget-header">Selected Benefits</h1>
        <br />
        <div><input id="Text1" value="" /></div>
    </div>
    <div id="divMiddle" style="display:block;width:350px;height:950px;float:left;border:1px solid black;" runat="server">
	    <h1 class="ui-widget-header">Page Content</h1>
        <div id="cart" class="cart" style="display:block;float:left;border:1px solid red;">
    	    <h5 class="ui-widget-header">test</h5>
	        <div id="divListID" class="ui-widget-content setDivWidth" runat="server">
		        <ol id="listID" style="height:500px;width:350px;" runat="server">
			        <li class="placeholder">Add your items here</li>
		        </ol>
	        </div>
        </div>
    </div>
    <div id="divRight" style="display:block;width:400px;height:950px;float:left;border:1px solid black;" runat="server">
        <div id="products" style="float:left;">
	        <h1 class="ui-widget-header">Page Data</h1>	
	        <div id="catalog">
		        <div>
			        <ul style="list-style:none;">
        				<li><img src="images/Fields/secondary-icons_02.gif" title="Benefit Group" alt="" /><b style="visibility:hidden;">Benefit Group</b></li>
        				<li>
        				    <div>
        				        <div><img src="images/Fields/secondary-icons_03.gif" title="Scheme Name" alt="" /></div>
        				        <div><b style="visibility:hidden;">txtSchemeName</b></div>
        				        <div><input type="text" id="txtSchemeName" value="" /></div>
        				    </div>
        				</li>
        				<li>
        				    <div>
        				        <div><img src="images/Fields/secondary-icons_04.gif" title="Provider" alt="" /></div>
        				        <div><b style="visibility:hidden;">txtProvider</b></div>
        				        <div><input id="txtProvider" value="" /></div>
        				    </div>
        				</li>
			        </ul>
        		</div>
    	    </div>
        </div>
    </div>
</div>

Open in new window


And the Jquery below.

<script type='text/javascript'>//<![CDATA[
    $(window).load(function() {
        $(function() {
            var arrV2 = [];

            $("#catalog").accordion();
            $("#catalog li").draggable({
                appendTo: "body",
                helper: "clone"
            });
            $("#cart ol").droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                accept: ":not(.ui-sortable-helper)",
                drop: function(event, ui) {
                    $(this).find(".placeholder").remove();


                    var stgSchemeName = $("#txtSchemeName").val();
                    var stgProvider = $("#txtProvider").val();

                    //alert($("#txtSchemeName").val());
                    //alert(testString);
                    var getDragObjectName = $("<li></li>").text(ui.draggable.text());
                    var dragObjectName = getDragObjectName.text().trim();
                    alert(dragObjectName);


                    if (dragObjectName == "txtSchemeName") {
                        $("<li></li>").text(stgSchemeName).addClass("cart-item").appendTo(this);
                        //alert("InputBox");
                    } else if (dragObjectName == "txtProvider") {
                        $("<li></li>").text(stgProvider).addClass("cart-item").appendTo(this);
                        //alert("InputBox");
                    }
                    else {
                        $("<li></li>").text(ui.draggable.text()).addClass("cart-item").appendTo(this);
                        //alert("IMG");
                    }


                    //updatePostOrder();
                    //$("<li></li>").text(ui.draggable.value()).addClass("cart-item").appendTo(this);

                    //alert(document.getElementById('txtSchemeName').value);

                    arrV2.push(ui.draggable.text());
                    $('#postOrder').val(arrV2.join(','));
                    //$('#postOrderV2').val(arrV2.join(','));
                }
            }).sortable({
                items: "li:not(.placeholder)",
                sort: function() {
                    $(this).removeClass("ui-state-default");
                    //updatePostOrder();
                }
            });
            $("#catalog ul").droppable({
                drop: function(event, ui) {
                    $(ui.draggable).remove();
                    //updatePostOrder();

                    //var intRemove = $.inArray(ui.draggable.text, arrV2);
                    var intRemove = arrV2.lastIndexOf(ui.draggable.text());
                    arrV2.splice(intRemove, 1);
                    //$('#postOrderV3').val(intRemove);
                    //arrV2.pop(intRemove);
                    //arrV2.push(ui.draggable.text());
                    $('#postOrder').val(arrV2.join(','));
                    //$('#postOrderV2').val(arrV2.join(','));

                },
                hoverClass: "ui-state-hover",
                accept: '.cart-item'
            });

        });
    });                   //]]>  
</script>

Open in new window



This is the full code. I hope this help work out where it's stopping my inputboxes from allowing spaces.
0
 
mcnuteCommented:
try to validate your html and css with w3c validator and improve your markup accordingly.

w3c validator
0
 
Julian HansenCommented:
Can you type anything else into the input boxes or is it only spaces that are not registering?
0
 
dipster307Author Commented:
No one had the correct answer, worked it out on my own.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.