$(document).ready(function () {
var $dialog = $("#dialog-box").dialog({
autoOpen: false,
modal: true,
position: "center",
draggable: true,
});
var $optionsdialog = $("#optionsdialog").dialog({
autoOpen: false,
modal: true,
position: "center",
draggable: true,
});
$(function () {
$("#column1, #column2, #column3").sortable({
connectWith: $(".column"),
placeholder: 'widget-placeholder',
forcePlaceholderSize: true,
revert: 300,
delay: 100,
opacity: 0.8,
containment: 'document',
cancel: '.header',
stop: function (event, ui) {
$optionsdialog.dialog("open")
},
})
});
$(".widget-content").bind("contextmenu", function (e) {
$("#dropmenu").css({
top: e.pageY + 'px',
left: e.pageX + 'px'
}).show();
return false;
});
$(".widget-content").hover(function () {
$(this).addClass("selected");
});
$(".optitemlist").click(function () {
$(".widget-content").empty();
$(".widget-content").append('<img class="listimg" src="img/list.png" alt="#" />');
$optionsdialog.dialog("close");
});
$(".optitemwimage").click(function () {
$(".widget-content").empty();
$(".widget-content").append('<img class="listimg" src="img/listimage.png" alt="#" />');
$optionsdialog.dialog("close");
});
$(".itemlist").click(function () {
var $selectedContent = $(".selected");
$selectedContent.empty();
$selectedContent.append('<img class="listimg" src="img/list.png" alt="#" />');
var selected = $("#columns").find("div").hasClass(".selected");
$(selected).removeClass("selected");
});
$(".itemwimage").click(function () {
$(".widget-content").empty();
$(".widget-content").append('<img class="listimg" src="img/listimage.png" alt="#" />');
});
$(".editproperties").click(function () {
$dialog.dialog("open");
});
$('#dropmenu').click(function () {
$('#dropmenu').hide();
});
$(document).click(function () {
$('#dropmenu').hide();
});
$(".remove").click(function () {
$(this).parents(".sort").clone().appendTo("#column1");
$(this).parents(".sort").animate({
opacity: 0
}, function () {
$(this).wrap('<div/>').parent().slideUp(function () {
$(this).remove();
});
});
});
$("#saveButton").click(function () {
if ($("#checkBox").is(":checked")) {
$(".sort h3").show();
}
else {
$(".sort h3").hide();
}
});
});
</script>
<div id="columns">
<ul id="column1" class="column">
<li class="widget header" id="column1title">
<div class="widget-title">
<h3>Channels:</h3>
</div>
</li>
<li class="widget sort">
<div class="widget-head">
<h3 class="title">Widget title 1</h3>
<a href="#" class="remove">[ x ]</a>
</div>
<div class="widget-content">
<img class="listimg" src="img/list.png" alt="#" />
</div>
</li>
<li class="widget sort">
<div class="widget-head">
<h3 class="title">Widget title 2</h3>
<a href="#" class="remove">[ x ]</a>
</div>
<div class="widget-content">
<img class="listimg" src="img/list.png" alt="#" />
</div>
</li>
<li class="widget sort">
<div class="widget-head">
<h3 class="title">Widget title 3</h3>
<a href="#" class="remove">[ x ]</a>
</div>
<div class="widget-content">
<img class="listimg" src="img/list.png" alt="#" />
</div>
</li>
</ul>
<ul id="column2" class="column">
<li class="widget header" id="column2title">
<div class="widget-title">
<h3>ROW 0 COLUMN 0</h3>
</div>
</li>
</ul>
<ul id="column3" class="column">
<li class="widget header" id="column3title">
<div class="widget-title">
<h3>ROW 0 COLUMN 1</h3>
</div>
</li>
</ul>
<ul id="dropmenu" class="contextMenu">
<li class="itemlist">
<a href="#">Item List</a>
</li>
<li class="itemwimage">
<a href="#">Featured Item w/ full image</a>
</li>
<li class="editproperties">
<a href="#">Edit Properties</a>
</li>
</ul>
<ul id="optionsdialog">
<li class="optitemlist">
<a href="#">Item List</a>
</li>
<li class="optitemwimage">
<a href="#">Featured Item w/ full image</a>
</li>
</ul>
<div id="dialog-box" class="dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable ">
<div class="ui-corner-all ui-helper-clearfix">
<span id="ui-dialog-title-dialog" class="ui-dialog-title">Edit Properties</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#"></a>
</div>
<div style="height: auto; min-height: 300px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
<p>Change the title?</p> <input id="title" value=" "/><br /><br />
<p> Show title?</p> <input id="checkBox" type="checkbox" /><br /><br />
<p> # of Items To Display?</p> <select name="choice" size="1"><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option></select><br /><br />
<p> More Link Title</p><input value="More Usability Items"/><br /><br />
<p> More Link Url</p><input value="/tag/usability.aspx"/><br /><br />
<p> CSS Class</p><input value="WebUsabiltiyCssClass"/><br /><br />
<input id="saveButton" class="ui-button" type="button" value="Save" />
</div>
</div>
<div id="saveDiv">
<br /><br /><input type="button" class="savebutton" value="Save Template and Close" /> <input type="button" class="savebutton" value="Save Template and Continue" /> or <a href="#" class="cancel">Cancel</a>
</div>
</div>
这是我的第一个jQuery项目，我遇到的问题是每当我打开对话框或右键单击时，它显然都失去了对小部件的选择。
例如，当我移动其中一个.sort小部件时，它会提示我是否需要itemlist或itemlistwimage。它不仅仅改变了一个小部件的选项，而是改变了所有小部件。我如何只选择一个，因为我不再关注那个元素？
感谢。
答案 0 :(得分：0)
您可能希望传递相关信息：http://jsfiddle.net/umxzw/1/
我添加了
$optionsdialog.data('content', $(ui.item).find('.widget-content'));
到sortable.stop函数并修改了“.optitemlist”和“.optitemwimage”的点击处理程序以使用该数据。