Javascript JQuery拖放/模式用法_Javascript_Jquery_Jquery Ui

Javascript JQuery拖放/模式用法

javascript jquery jquery-ui

Javascript JQuery拖放/模式用法,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我试图以一种方式使用Dragable/Dropable，允许您拖放项目，将其放置到位（而不是排序），然后单击它以显示编辑模式。我被弄糊涂了，一旦你把它扔了，你是如何制作edittable（sp？）的目前，我的代码看起来几乎完全像jquery的可拖动/可拖放演示。但无论如何，它在这里这是一个非常早期的原型，我的工作，所以请记住，当协助。对于这个概念，最初的反馈非常好，我不能再浪费时间在其他地方寻找解决方案了。提前感谢您的指导 <head> <title>CTB

我试图以一种方式使用Dragable/Dropable，允许您拖放项目，将其放置到位（而不是排序），然后单击它以显示编辑模式。我被弄糊涂了，一旦你把它扔了，你是如何制作edittable（sp？）的

目前，我的代码看起来几乎完全像jquery的可拖动/可拖放演示。但无论如何，它在这里

这是一个非常早期的原型，我的工作，所以请记住，当协助。对于这个概念，最初的反馈非常好，我不能再浪费时间在其他地方寻找解决方案了。提前感谢您的指导

<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>


CTB原型
身体{
保证金：0；
填充：0；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
}
h1，h2，h3{
保证金：0；
填充：0；
字体大小：正常；
}
h1{
字号：2em；
}
氢{
字号：1.8em；
}
h3{
字号：1.6em；
垫底：0px；
边缘底部：0px；
}
.忽略{
边际上限：0px；
填充顶部：0px；
垫底：0px；
边缘底部：0px；
}
p、 ul，ol{
边际上限：0px；
填充顶部：0px；
边缘底部：0px；
垫底：0px；
线高：180%；
}
div#wrapper{
保证金：0自动；
填充：0；
}
div#left{float:left；width:300px；}
分区#类别{}
#类别按钮{}
div#right{float:left；width:699px；}
div#top{}
div#bottom{}
#选择编辑{
填充物：1em 1.5em 1em 1.5em；
}
h1{
填充：.15em；
保证金：0；
}
#产品{
浮动：左；
宽度：250px；
右边距：2米；
}
#推车{
宽度：700px；
浮动：左；
}
/*设置列表样式以最大化可拖放命中区域*/
#购物车{
保证金：0；
填充：1em 0 1em 3em；
}
#选择编辑{
边缘顶部：5px；
}
ul{margin:0px 0px 0px 0px；padding:0px 0px 0px 0px；}
函数detailRemoveButton（）{
$（“#购物车ol>li”）。按钮({
图标：{
主：“ui图标停止”
},
文本：正确
})。单击（函数（）{
$（this.remove（）；
$（“#cart ol”）.sortable（'refresh'）；
});
}
$（函数（）{
$（“#目录”）.accordion（）；
$（“#目录li”）。可拖动({
附：“身体”，
助手：“克隆”
});
$（“#cart ol”）。可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
$（this.find（“.placeholder”）.remove（）；
$（“”）.text（ui.draggable.text（））.appendTo（this）；
detailRemoveButton（）；
}
}).可排序({
项目：“li:非（.占位符）”，
排序：函数（）{
$（this.removeClass（“ui状态默认”）；
}
});
});
呼叫流

代理-X
珠穆朗玛峰
大I市场


引用
引用
FNOL


珠穆朗玛峰自动导航
BIM

当前通话详情
将调用流项目拖到此处
选择编辑
姓名信息
名字：
惯性矩：
姓氏：
后缀：
年少者。
老。
联系方式
电话号码：



备用电话号码：



电子邮件地址：

地址信息
第1行：



第2行：



城市：


州：邮编：

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

我不确定是否正确理解了您的问题，但您基本上希望能够编辑可拖动/可拖放项。这里有一段代码是我根据上面的代码修改的，当你点击一个对话框时，我连接了一个模态对话框的显示

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

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