0
在以下丰富的编辑器控件（CLEditor，available here）中，盒子底部的拖动抓手可以让我向下拖动并释放，向下和向上拖动并释放好，但向上拖动会导致永远不会触发endDrag事件我不得不实施一个超时kludge。你知道我可能在jQuery/Javascript中做错了吗？Javascript/jQuery - 这个endDrag事件怎么没有正确触发？
注意：我在jsFiddle here上创建了一个示例。
<script type="text/javascript">
var textarea, staticOffset;
var iLastMousePos = 0;
var iMin = 160;
var prevTimeout = null;
function startDrag(e) {
console.log('startDrag() event fired');
textarea = $(e.data.el);
textarea.blur();
iLastMousePos = mousePosition(e).y;
staticOffset = textarea.height() - iLastMousePos;
textarea.css('opacity', 0.25);
$(document).mousemove(performDrag).mouseup(endDrag);
return false;
}
function performDrag(e) {
console.log('performDrag() event fired');
var iThisMousePos = mousePosition(e).y;
var iMousePos = staticOffset + iThisMousePos;
// kludge start
// Try implementing without this and the endDrag event won't fire
// if you immediately start dragging upwards
if (iLastMousePos >= (iThisMousePos)) {
console.log('kludge implemented');
iMousePos -= 60;
if (iMousePos < iMin) {
endDrag();
return false;
}
if (!prevTimeout) {
prevTimeout = setTimeout('endDrag();clearTimeout();',600);
}
}
// end kludge
iLastMousePos = iThisMousePos;
iMousePos = Math.max(iMin, iMousePos);
textarea.height(iMousePos + 'px');
if (iMousePos < iMin) {
endDrag();
}
return false;
}
function endDrag() {
console.log('endDrag() event fired');
prevTimeout = null;
$(document).unbind('mousemove', performDrag).unbind('mouseup', endDrag);
textarea = $('.cleditorMain:first'); // got a better selector?
textarea.css('opacity', 1);
textarea.focus();
textarea = null;
staticOffset = null;
iLastMousePos = 0;
var editor = $("#fldMessage").cleditor()[0];
editor.refresh();
if (!$.browser.msie) { // there's a quirk in IE
editor.focus();
}
}
function mousePosition(e) {
return { x: e.clientX + document.documentElement.scrollLeft, y: e.clientY + document.documentElement.scrollTop };
};
$(document).ready(function(){
$('#fldMessage').cleditor({
width:'100%',
height:'100%',
useCSS:true,
styles:[["Paragraph", "<p>"], ["Header 1", "<h1>"], ["Header 2", "<h2>"],
["Header 3", "<h3>"], ["Header 4","<h4>"], ["Header 5","<h5>"],
["Header 6","<h6>"], ["Code","<pre>"]],
docCSSFile:"js/jquery.cleditor/jquery.cleditor.doc.css"
}).focus();
// BTW, if you have a more efficient selector than .cleditorMain:first, please let me know
$('.cleditorMain:first').after('<div class="gripper" />');
$('.cleditorMain:first').next('.gripper').css({
'background':'transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAFCAMAAACD1meMAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAGUExURbu7u////3iwjPUAAAACdFJOU/8A5bcwSgAAABRJREFUeNpiYMADGHEDBhroAwgwAA9QADeT0qnSAAAAAElFTkSuQmCC) no-repeat scroll center 2px',
'cursor':'s-resize',
'height':'9px',
'overflow':'hidden'
}).bind("mousedown",{el: $('.cleditorMain:first')} , startDrag);
});
</script>
<fieldset style="min-height:160px">
<textarea id="fldMessage" name="fldMessage" rows="4"></textarea>
</fieldset>
你有这个地方的例子吗？此外，执行Drag（e）的final if语句永远不会发生，因为您已确信iMousePos永远不会成为iMin。 – Suroot 2012-02-15 01:21:13
@Suroot我刚刚在jsFiddle上创建了一个演示。请参阅原始问题中的链接。你会看到的是，你可以点击一个拖动抓手向下好，你可以点击然后向上，但如果你点击并立即拖动，它不会让你。注释掉“kludge”块，它仍然会失败。 – Volomike 2012-02-15 13:58:59