1. Предисловие
Целью уталкивания мыши является перетаскивание многих небольших точек на странице для фиксированного позиционирования, а затем копируйте HTML и вставьте его в код разработки страницы. Мне пришлось использовать плагин jquery.fn.dagebleable.
2. дизайнерские идеи
Приведите кнопку мыши на элементе перетаскивания, свяжите мышь, чтобы перемещать в объект документа, а мышь отскакивает событие;
Почему бы не связать все три события с элементом сопротивления?
Кода -копия выглядит следующим образом:
$ target.bind ('mousedown', fn);
$ (документ)
.bind ('mouseMove', fn)
.bind ('mouseUp', fn);
3. Детали реализации исходного кода
Есть много вещей, которые следует отметить при реализации исходного кода:
1. Во -первых, в событии нажатия мыши при щелчке и перетаскивании элемент может быть выбран текст области.
Кода -копия выглядит следующим образом:
// Предотвращение выбора регионального текста для Chrome Firefox IE9
e.preventdefault ();
// Firefox IE9 || меньше, чем IE9
window.getSelection?
2. Если элемент перетаскивания - это изображение (метка IMG), мышь перетаскивает изображение на короткое расстояние, появится запрещенная подсказка, то есть изображение не может быть перетаскивано,
Это поведение браузера по умолчанию, поэтому просто заблокируйте поведение браузера по умолчанию.
Кода -копия выглядит следующим образом:
e.preventdefault ();
3. Вопросы о границах (диапазон перетаскивания)
Код, реализованный в начале, выглядит следующим образом:
Кода -копия выглядит следующим образом:
// x, y представляет собой левое и верхнее значение, которое будет установлено элементом перетаскивания, LimitObj является объектом диапазона области перетаскивания, и во время тестирования была обнаружена проблема.
// во время процесса перетаскивания иногда перетаскивающие объекты не могут быть непосредственно близко к границе
if (x> = limitobj._left && x <= limitobj._right) {
$ target.css ({left: x + 'px'});
}
if (y> = limitobj._top && y <= limitobj._bottom) {
$ target.css ({top: y + 'px'});
}
Подумайте: почему возникает вышеупомянутая проблема?
Следовательно, код должен быть обработан таким образом:
Кода -копия выглядит следующим образом:
if (x <limitobj._left) {
x = LimitObj._Left;
}
if (x> limitobj._right) {
x = limitobj._right;
}
if (y <limitobj._top) {
y = LimitObj._Top;
}
if (y> limitobj._bottom) {
y = limitobj._bottom;
}
$ target.css ({слева: x + 'px', top: y + 'px'});
Наконец решил эту проблему, но Cloudgamer дал лучший способ ее написать:
Кода -копия выглядит следующим образом:
$ target.css ({
Слева: math.max (math.min (x, limitobj._right), limtobj._left) + 'px',
Верх: math.max (math.min (y, limitobj._bottom), limtobj._top) + 'px'
});
Полный исходный код программы:
Кода -копия выглядит следующим образом:
$ .fn.extend ({
/**
* Авто: блог Yuan Huazi YJH 2014/02/21
*/
перетаскивать: function (options) {
var Dragstart, Dragmove, Dragend,
$ boundaryelem, limtobj;
функция _initoptions () {
var NOOP = function () {}, defaultOptions;
defaultoptions = {// элемент конфигурации по умолчанию
Boundaryelem: 'body' // граничный контейнер
};
options = $ .extend (defaultoptions, опции || {});
$ brandaryelem = $ (options.boundaryelem);
dragstart = options.dragstart ||
dragmove = options.dragmove ||
Dragend = Options.Dragend ||
}
функция _drag (e) {
var clientx, clienty, offsetleft, offsetTop,
$ target = $ (это), self = this;
LimitObj = {
_left: 0,
_top: 0,
_right: ($ brandaryelem.innerwidth () || $ (window) .width ()) - $ target.outerwidth (),
_bottom: ($ brandaryelem.innerheight () || $ (window) .height ()) - $ target.outerheight ()
};
// Записывают позицию, когда мышь нажимают и относительную позицию элемента сопротивления
clientx = e.clientx;
clienty = e.clienty;
offsetleft = this.offsetleft;
OffSetTop = this.OffSetTop;
dragstart.apply (это, аргументы);
$ (документ) .bind ('MouseMove', Movehandle)
.bind ('MouseUp', Uphandle);
// обработка событий мыши
Функция перемещается (e) {
var x = e.clientx - clientx + offsetleft;
var y = e.clienty - clienty + offsetTop;
$ target.css ({
Слева: math.max (math.min (x, limitobj._right), limtobj._left) + 'px',
Верх: math.max (math.min (y, limitobj._bottom), limtobj._top) + 'px'
});
Dragmove.Apply (Self, Arguments);
// заблокировать поведение по умолчанию браузера (мышь перетаскивает изображение на короткое расстояние, появится запрещенная подсказка, то есть изображение больше не может быть перетаскивано)
e.preventdefault ();
}
// обработка событий мыши
Функция uphandle (e) {
$ (документ) .uncind ('MouseMove', MoveHandle);
Dragend.Apply (self, аргументы);
}
}
_initoptions ();
$ (это)
.css ({position: 'Absolute'})
.
$ (this) .bind ('mousedown', function (e) {
_drag.apply (это, [e]);
// Предотвращение выбора регионального текста для Chrome Firefox IE9
e.preventdefault ();
// Firefox IE9 || меньше, чем IE9
window.getSelection?
});
});
вернуть это;
}
});
Вызов экземпляра:
Кода -копия выглядит следующим образом:
// Вызовите экземпляр
(function () {
$ ('. Drag-elem'). Drag ({
Boundaryelem: '#boundary',
Dragstart: function () {
$ (this) .html ('<pran> Подготовка к перетаскиванию </span>'). css ({zindex: 2}).
},
Dragmove: function () {
var pos = $ (this) .position ();
$ (this) .html ('<pan> drag (' + pos.left + ',' + pos.top + ') </span>');
},
Dragend: function () {
$ (this) .html ('<pan> rag end </span>');
}
});
} ());