javascript - JQuery 拖放/模态用法

我正在尝试以一种允许您拖动和放置项目的方式使用可拖动/可放置的方式，将其放置到位(而不是排序)，然后单击它以调出编辑模式。我对如何在删除项目后使其可编辑(sp？)感到困惑。

目前我的代码看起来几乎与 jquery Draggable/droppable 演示一模一样。但无论如何，它就在这里。

这是我为工作制作的一个非常早期的原型(prototype)，所以请在提供帮助时记住这一点。最初的反馈对这个概念非常好，我不能再浪费时间在其他地方寻找解决方案。预先感谢您的任何指导!

<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"></script>
    <script type="text/javascript" language="javascript" src="http://nt-websql/scheduler/js/jquery-ui-1.8.1.custom.min.js"></script>
    <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>

我提供了尽可能多的代码来提供帮助。

最佳答案

我不确定我是否正确理解你的问题，但你基本上希望能够编辑可拖动/可放置的项目。这是我根据上面的代码修改的一些代码，当您单击其中一个删除的项目时，我会显示模式对话框:

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');
    });
}

我对 HTML 标记所做的唯一更改是添加了一个对话框占位符，其显示设置为“无”:

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

因此，当您将此代码放入示例中时，您应该能够单击已放置的项目，在文本框中看到一个模式弹出窗口，其中包含已放置项目的文本，编辑文本，单击“确定”并查看更新后的内容放置的项目中的文本。我注释掉了当您单击该项目时删除该项目的代码。

我发现的唯一问题是更改文本会更改放置项目的高度。目前不确定这是否是由于可排序刷新调用所致。我会继续关注的。

我希望这有帮助。如果您正在尝试做其他事情或者有其他问题，请告诉我。祝你好运!

关于javascript - JQuery 拖放/模态用法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3299853/

javascript - JQuery 拖放/模态用法

上一篇：javascript - jQuery 中的 Accordion 菜单

下一篇：javascript - 合并 JavaScript 文件