我有一个在鼠标移出时调用的函数。它检查元素现在是否被“拖动”或正在编辑。如果不是，它应该删除活动状态。
这就是它的外观。
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);
}
});
});