【发布时间】：2012-12-06 17:07:57
【问题描述】：
我有一个在鼠标移出时调用的函数。 它检查元素现在是否被“拖动”或正在编辑。如果不是，它应该删除活动状态。
这就是它的样子。
function onMouseOut() {
console.log("mouse out");
if ($(this).find(".content").attr('data-editing') != "true" && $(this).find(".content").attr('data-dragging') != "true") {
console.log("no edit, no dragging");
removeActive($(this).find(".content"));
} else {
console.log("edit: " + $(this).find(".content").attr("data-editing"));
console.log("dragging: " + $(this).find(".content").attr("data-draging"));
}
}
元素在可排序的内部。它不会破坏上面的代码，我可以根据需要对其进行多次排序。但是当我添加“connectWith”并转移发件人时，它完全崩溃了。
那么我到控制台的输出如下：
mouse out
edit: undefined
dragging: undefined
现在，这怎么可能？
编辑：
好的，标记来了：
<div id="body">
<section class="main_1 grid_8 field" data-field='main_1'>
<div class='module'>
<div class="content content-editor" data-id='1' data-module='content' contenteditable='true'>
<h1>Heading 1</h1><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
<div class='module'>
<div class="content content-editor" data-id='4' data-module='content' contenteditable='true'>
<h4>Yet another content</h4><p>This is yet another contentblock!</p>
</div>
</div>
</section>
<aside class="aside_1 grid_4 field" data-field='aside_1'>
<div class='module'>
<div class="content content-editor" data-id='2' data-module='content' contenteditable='true'>
<h2>Aside Content</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</aside>
<div class="x-clear"></div>
</div>
这里是js：
$(document).ready(function() {
/*
* - on hoover, we display the panel
*/
$( ".content-editor" ).mouseenter(onMouseIn);
$( ".edit-wrap" ).live("mouseleave", onMouseOut);
/*
* - on click/focus, we set it as active
*/
$( ".content-editor" ).focus(onFocus);
$( ".content-editor" ).blur(onLostFocus);
});
/*
* - functions
*/
function onMouseIn() {
if ($(this).attr('data-active') != "true" && !dragging) {
console.log("wasnt active: " + $(this).attr('data-active'));
makeActive($(this));
} else {
console.log("was active: " + $(this).data('id') + " - act: " + $(this).attr('data-active'));
}
}
function onMouseOut() {
console.log("mouse out");
if ($(this).find(".content").attr('data-editing') != "true" && $(this).find(".content").attr('data-dragging') != "true") {
console.log("no edit, no dragging");
removeActive($(this).find(".content"));
} else {
console.log("edit: " + $(this).find(".content").attr("data-editing"));
console.log("dragging: " + $(this).find(".content").attr("data-draging"));
}
}
function onFocus() {
$(this).attr('data-editing', 'true');
}
function onLostFocus() {
console.log("lost focus: " + $(this).data('id'));
}
function makeActive($this) {
$this.attr('data-active', "true");
$this.wrap("<div class='edit-wrap'>");
var $parent = $this.parent(".edit-wrap");
$parent.prepend("<div class='edit-head'>» Content ( Quick Edit )</div>");
$parent.append(editMenu);
}
function removeActive($this) {
$this.parent(".edit-wrap").find(".edit-head").remove();
$this.parent(".edit-wrap").find(".edit-menu").remove();
$this.unwrap(".edit-wrap");
$this.attr('data-active', "false");
}
/*
* - html
*/
var editMenu = "<div class='edit-menu'>"+
"<a href='#' class='btn openEditor'>Öppna Editor</a>"+
"<a href='#' class='btn quicksave'>Snabspara</a>"+
"</div>";
和：
var dragging = false;
$(document).ready(function() {
/*
$( ".edit-head" ).live("mouseover", function() {
$(this).parent(".edit-wrap").draggable({
handle: ".edit-head",
revert: 'invalid'
});
});
$( ".edit-wrap" ).live("dragstart", function() {
$(this).find(".content").attr("data-dragging", "true");
});
$( ".edit-wrap" ).live("dragstop", function() {
$(this).find(".content").attr("data-dragging", "false");
removeActive($(this).find(".content"));
});
*/
$( ".field" ).sortable({
start: function(e, ui) {
ui.placeholder.height(ui.item.height());
$(this).find(".content").attr("data-dragging", "true");
dragging = true;
$(".field").addClass("target");
},
stop: function() {
$(this).find(".content").attr("data-dragging", "false");
dragging = false;
$(".field").removeClass("target");
},
connectWith: '.field',
placeholder: "drop-placeholder",
dropOnEmpty: true,
handle: ".edit-head",
update: function(e, ui) {
var $this = ui.item;
var $sender = ui.sender;
if ($sender) {
//vi bytte field
console.log("bytte");
} else {
console.log("bytte inte");
}
console.log("change: " + $this + " from: " + $sender);
}
});
});
【问题讨论】：
-
也发布您的标记
-
一般来说，您不应该使用
.attr('data-foo')。只需使用.data('foo')。还要记住，来自 HTML 标记的数据名称在 jQuery 中总是小写的，无论它们在 HTML 源中是什么大小写。