jQuery UI:开始可拖动之前
在jQueryUI开始拖动之前,如何实现before start事件以更改位置并在draggable元素的DOM中放置?
您可以扩展原型方法:
看看演示
var oldMouseStart = $.ui.draggable.prototype._mouseStart; $.ui.draggable.prototype._mouseStart = function (event, overrideHandle, noActivation) { this._trigger("beforeStart", event, this._uiHash()); oldMouseStart.apply(this, [event, overrideHandle, noActivation]); }; $("#draggable").draggable({ beforeStart: function () { console.log('beforeStart::'); } });
我发现作为“helper”选项传递给sortable的方法将在“start”之前调用,并传递(作为第二个参数)已被单击的项。 您可以在此方法中执行您需要执行的操作,然后只返回元素本身(默认的“原始”帮助程序行为)。 我正在使用它来设置我的容器的高度,以便它不会崩溃并触发浏览器窗口的滚动。 这是看起来像:
$(list).sortable({ helper: function(event, element) { // it's too late if we wait until start to do this $(this).css('height', this.$().height()); return element; } })
我不敢访问jQuery UI私有变量,所以我实现了这样:
// The mouse interaction sequence for dragging starts with a mousedown action. element.on('mousedown', function() { // Mouseup cancels dragging. This is a boring click. element.one('mouseup', function() { element.off('mousemove.mynamespace'); }); // Moving the mouse while holding mousedown is dragging. // This is also what sets off jQuery UI draggable, // but we registered our event listeners first. element.one('mousemove.mynamespace', function() { // !! Your beforeStart code here. }); }); // Initialize jQuery UI draggable AFTER our own event listeners. element.draggable();
为此,我使用了mouseup和mousedown:
var timeout; $('.draggable').mousedown(function() { $('#dragContainer').append($(this)); $(this).css({ top: 0, left: 0 }); }); $('.draggable').draggable();
如果mousedown
实际上是一次点击而不是拖动,我还使用mouseup
来重置旧的父级和位置。
有一个使用distance
选项的beforeStart
事件会很好,但是我找不到它…