• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1332
  • Last Modified:

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

0
dipster307
Asked:
dipster307
  • 4
  • 3
1 Solution
 
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
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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:
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
 
dipster307Author Commented:
No one had the correct answer, worked it out on my own.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now