JQuery Drag/Drop/Modal Usage

I'm trying to use draggable/droppable in a manner that allows you to drag and item, drop it in place(not sort), and then click on it to bring up an edit modal. I'm getting stumped on how you make the item edittable(sp?) once you drop it.

Currently my code looks almost exactly like the jquery draggable/droppable demo. But here it is anyway.

This is a very early prototype I'm making for work, so please keep that in mind when assisting. Initial feedback is great on the concept, I just can't waste any more time trying to find a solution elsewhere. Thank you in advance for any guidance!

<head>
    <title>CTB Prototype</title>
    <link href="css/redmond/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" language="javascript" src="http://nt-websql/scheduler/js/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript" language="javascript" src="http://nt-websql/scheduler/js/jquery-ui-1.8.1.custom.min.js"&gt;&lt;/script&gt;
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }
        h1, h2, h3 {
            margin: 0;
            padding: 0;
            font-weight: normal;
        }
        h1 {
            font-size: 2em;
        }

        h2 {
            font-size: 1.8em;
        }

        h3 {
            font-size: 1.6em;
            padding-bottom:0px;
            margin-bottom:0px;
        }
        .ignore {
            margin-top: 0px;
            padding-top: 0px;
            padding-bottom:0px;
            margin-bottom:0px;
        }
        p, ul, ol {
            margin-top: 0px;
            padding-top: 0px;
            margin-bottom: 0px;
            padding-bottom: 0px;
            line-height: 180%;
        }
        div #wrapper {
            margin: 0 auto;
            padding: 0; 
        }
        div #left{float:left;width:300px;}
            div #categories{}
            #categories button{}
        div #right{float:left;width:699px;}
            div #top{}
            div #bottom{}


        #selectionEdit {
            padding:1em 1.5em 1em 1.5em;
        }
        h1 {
            padding: .15em;
            margin: 0;
        }
        #products {
            float:left;
            width: 250px;
            margin-right: 2em;
        }
        #cart {
            width: 700px;
            float: left;
        }
        /* style the list to maximize the droppable hitarea */
        #cart ol {
            margin: 0;
            padding: 1em 0 1em 3em;
        }
        #selectionEdit p{
            margin-top:5px;
        }
        ul{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
    </style>
    <script type="text/javascript" language="javascript">
        function detailRemoveButton() {
            $("#cart ol > li").button({
                icons: {
                    primary: 'ui-icon-stop'
                },
                text: true
            }).click(function () {
                $(this).remove();
                $("#cart ol").sortable('refresh');
            });
        }

        $(function () {
            $("#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();
                    $("<li></li>").text(ui.draggable.text()).appendTo(this);
                    detailRemoveButton();
                }
            }).sortable({
                items: "li:not(.placeholder)",
                sort: function () {
                    $(this).removeClass("ui-state-default");
                }
            });

        });
    </script>
</head>
<body>
<!--<div id="wrapper">
    <div id="left" runat="server">
        <div id="categories" runat="server">
            <div id="draggable">Drag me</div>
        </div>
    </div>
    <div id="right" runat="server">
        <div id="top" runat="server">
        <input type="text" />
        </div>
        <div id="bottom" runat="server">
            <div id="droppable" class="ui-widget-header">
                <P>Drop here</P>
            </div>
        </div>  
    </div>
</div>-->

<div id="products">
    <h1 class="ui-widget-header">Call Flow</h1> 
    <div id="catalog">
        <h3><a href="#">Agencies</a></h3>
        <div class="ignore">
            <ul>
                <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">Agency-X</span></li>
                <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">Everest</span></li>
                <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">Big I Markets</span></li>
            </ul>
        </div>
        <h3><a href="#">Actions</a></h3>
        <div>
            <ul>
                <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">Quote</span></li>
                <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">Referral</span></li>
                <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">FNOL</span></li>
            </ul>
        </div>
        <h3><a href="#">Forms</a></h3>
        <div>
            <ul>
                <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">Everest AutoFNOL</span></li>
                <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">BIM</span></li>
            </ul>
        </div>
    </div>
</div>


<div id="cart">
    <h1 class="ui-widget-header">Current Call Details</h1>
    <div class="ui-widget-content">
        <ol>
            <li class="placeholder">Drag call flow items here</li>
        </ol>
    </div>
    <div style="margin-top:10px;">
        <h1 class="ui-widget-header">Selection Edit</h1>
        <div class="ui-widget-content" id="selectionEdit">
<form>
            <fieldset> 
                <legend>Name Information</legend>
                <label for="nameFirst">First Name:</label>
                <input type="text" id="nameFirst" />
                <label for="nameMiddle">MI:</label>
                <input type="text" id="nameMiddle" maxlength="4" style="width:30px;text-align:center;" />
                <label for="nameLast">Last Name:</label>
                <input type="text" id="nameLast" />
                <label for="nameSuffix">Suffix:</label>
                <select id="nameSuffix">
                    <option>Jr.</option>
                    <option>Sr.</option>
                </select>
            </fieldset>
            <div style="width:501px;display:block">
            <fieldset style="width:250px;display:block"> 
                <legend>Contact Information</legend>
                <label for="phoneNumber">Phone Number:</label><br />
                <input type="text" id="phoneNumber" /><br />
                <label for="phoneNumberAlt">Alternate Phone Number:</label><br />
                <input type="text" id="phoneNumberAlt" /><br />
                <label for="emailAddress">Email Address:</label><br />
                <input type="text" id="emailAddress" />
            </fieldset>
            <fieldset style="width:250px;display:block"> 
                <legend>Address Information</legend>
                <label for="addressNumber">Line 1:</label><br />
                <input type="text" id="addressLing1" /><br />
                <label for="addressStreet">Line 2:</label><br />
                <input type="text" id="addressLine2" /><br />
                <label for="addressCity">City:</label><br /><input type="text" id="addressCity" /><br />
                <label for="addressState">State:</label><input type="text" style="width:25px;margin-right:10px;" id="addressState" maxlength="2" /><label for="addressZip">Zip:</label><input type="text" style="width:40px;" id="addressZip" maxlength="5" />
            </fieldset>
            </div>
            </form>
        </div>
    </div>
</div>

I gave as much code as I could to assist.

I'm not sure if I'm understanding your question correctly, but you basically want to be able to edit the draggable/droppable item. Here's a bit of code that I modified from your code above where I hook up the showing of a modal dialog when you click on one of the dropped items:

function detailRemoveButton() {
    $("#cart ol > li").button({
        icons: {
            primary: 'ui-icon-stop'
        },
        text: true
    }).click(function () {
        $('#txtName').val($(this).text());  //set the dialog's text box to the clicked item's text
        var item = $(this);  //grab on to this as we'll reference it in the dialog (closure)
        $('#dialog').dialog( {  //open up the dialog
            autoOpen: true,
            modal: true,
            title: 'Edit Droppable Text',
            buttons: {
                'Save' : function() {  //update the dropped text when we click Save
                    item.text($('#txtName').val());
                    $(this).dialog('close');
                }
            }
        });
        //$(this).remove();  //commented this out
        $("#cart ol").sortable('refresh');
    });
}

The only change I made to your HTML markup was the addition of a dialog placeholder whose display is set to 'none':

<div id='dialog' style='display:none;'>
    <label for='txtName'>Text:</label><input type='input' id='txtName' />
</div>

So when you place this code into your sample, you should be able to click on a dropped item, see a modal pop-up with the dropped item's text in the text box, edit the text, click OK and see the updated text in the dropped item. I commented out the code that removes the dropped item when you click on it.

The only issue I found was that changing the text changed the height of the dropped item. Not sure if that's due to the sortable-refresh call or not at this point. I'll keep looking at it.

I hope this helps. Please let me know if you were trying to do something else or if you have other questions. Good luck!

This is very very close and I think points me in the right direction. Thanks so much for the reply. The only difference to what you provided and what I'm after, is that what I'm after will not change the button text, but rather append a new div below 'selection edit' with a form. But thats another question later if I have issues.Thanks again, marking your answer as correct as it seems to solve problem 1.

JClaspill 2010-07-21 17:26:20

Glad I could help. Your prototype looks good. Good luck!!

David Hoerster 2010-07-21 17:29:21

ansaurus

tags:

views:

answers:

JQuery Drag/Drop/Modal Usage

related questions