我正在尝试使用draggable / droppable，允许您拖动项目，将其放置到位（不排序），然后单击它以显示编辑模式。一旦你放弃它，我就会对如何使项目编辑（sp？）感到难过。
目前我的代码看起来几乎与jquery draggable / droppable演示完全相同。但无论如何它在这里。
这是我正在制作的非常早期的原型，所以请在协助时记住这一点。对概念的初步反馈非常好，我不能再浪费时间在其他地方寻找解决方案了。提前感谢您的任何指导！
<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>
我尽可能多地提供了帮助。
答案 0 :(得分：1)
我不确定我是否正确理解了您的问题，但您基本上希望能够编辑可拖动/可投放的项目。这里有一些我从上面的代码中修改过的代码，当你点击其中一个被删除的项目时，我联系了一个模态对话框的显示：
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标记的唯一更改是添加了一个对话框占位符，其显示设置为“none”：
<div id='dialog' style='display:none;'>
<label for='txtName'>Text:</label><input type='input' id='txtName' />
</div>
因此，当您将此代码放入示例中时，您应该能够单击已删除的项目，在文本框中查看带有已删除项目文本的模式弹出窗口，编辑文本，单击“确定”并查看更新已删除项目中的文本。我注释掉了单击它时删除已删除项目的代码。
我发现的唯一问题是更改文本会更改已删除项目的高度。此时不确定是否由于可排序刷新调用。我会一直看着它。
我希望这会有所帮助。如果您正在尝试做其他事情或者您有其他问题，请告诉我。祝你好运！