Лента Каталог Файлы Форумы Услуги
ОсновноеRadiotalkПользовательское
Программирование
6   •   Посмотреть все темы

Drag & drop js-скрипт

 
1

4619
Web3r @Web3r
Приветы.

Господа, помогите найти простой скрипт **********, но с возможностью задать ограничение области drag&drop только родительским блоком. Нужен чистый js. И желательно, чтобы при перетаскивании блок оставался видимым, как в примере. Сейчас есть ********** на html5, но без описанных выше фич.

P.S Помню, Dimitry делал какую-то библиотеку, вроде там было что-то подобное реализовано.

Отредактировано Web3r - 31.03.2015
2970
удалён @Foggy
Немного не то, но по идее работать должно также: **********, **********.
О, поиск по sortable дал больше результатов. В ********** есть контейнеры и работа с ними.

Я вообще не сумел нагуглить драг в пределах контейнера без использования либ. Скажу одно: на нативном драге этого не сделать, потому что он выносит эл-т за пределы страницы так, что его можно утянуть даже за пределы браузера и это не ограничивается никак.
Чтоб это сделать, нужно написать свою маленькую либу. Нужно создать контейнер relative и блок absolute, который будет менять позиционирование эл-та. Круто было бы сделать это через transform, чтобы послать ie9 в задницу драг не тупил.
Если займёшься разработкой своей либы - создавай её на гитхабе и пиши ссылку) По возможности подключусь, интересная тема.

Отредактировано Foggy - 31.03.2015
2615
Сергей @Pegass
урезав реализацию камер из моего шаблона получаем **********


ЗЫ а Foggy лол))))

Отредактировано Pegass - 31.03.2015
4619
Web3r @Web3r
Pegass пишет:

урезав реализацию камер из моего шаблона получаем **********


ЗЫ а Foggy лол))))

FF 28, drag не работает, консоль молчит. Хм...
// Webkit работает.

Foggy, я нашел тут одну - **********, довольно большой функционал для 60кб. Если с решением Пегаса ничего не выйдет, попробую ее.

Отредактировано Web3r - 31.03.2015
2615
Сергей @Pegass
Web3r пишет:

Pegass пишет:

урезав реализацию камер из моего шаблона получаем **********


ЗЫ а Foggy лол))))

FF 28, drag не работает, консоль молчит. Хм...

Foggy, я нашел тут одну - **********, довольно большой функционал для 60кб. Если с решением Пегаса ничего не выйдет, попробую ее.

нативный драг не особо кросбраузерный, обновишь мозилу - заработает
проверку на наличие нативного драга я убрал

function is_touch_device() {//проверка на тачскрин
return !!('ontouchstart' in window);
}
if("undefined"==typeof window.FileReader||is_touch_device())alert('no native drag');//если старый браузер или устройство с сенсорным экраном

Отредактировано Pegass - 31.03.2015
4619
Web3r @Web3r
Pegass пишет:

нативный драг не особо кросбраузерный, обновишь мозилу - заработает
проверку на наличие нативного драга я убрал

function is_touch_device() {//проверка на тачскрин
return !!('ontouchstart' in window);
}
if("undefined"==typeof window.FileReader||is_touch_device())alert('no native drag');//если старый браузер или устройство с сенсорным экраном

Да куда уж обновлять, итак Aurora...
Спасибо, что выложил, но если для целой ветки ff не работает, то придется юзать то, о чем выше говорил.
Тьфу... Не 28, а 38... 😁

Отредактировано Web3r - 31.03.2015
2615
Сергей @Pegass
хм и правда не работает, хотя должно

2615
Сергей @Pegass
UP пофиксил **********

2970
удалён @Foggy
Web3r, interact я видел, когда гуглил. Тоже не совсем то, что тебе нужно. Ограничение контейнером там работает не так, как тебе нужно. Блок можно унести за контейнер, но он прилетает обратно. Да и встаёт не от края, а как-то от центра блока. Очень странно эта часть скрипта у них работает.
Pegass, у меня в яндекс.браузере не работает твой скрипт. окошко не таскается. а в хроме всё норм. тем не менее яндекс.браузером многие пользуются.

2615
Сергей @Pegass
Foggy, эмммм, а разве яндекс отличается от хрома????? Тот же вебкит

2615
Сергей @Pegass
Foggy, исправил

4619
Web3r @Web3r
Foggy, там настраивается. Можно полностью убрать выход за блок (endOnly: false) или отредактировать прилет обратно (**********). По какому принципу работает второе тоже не совсем разобрался - настроил под свои нужды методом тыка.
interact('.draggable')
.draggable({
inertia: true,
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: -0.1, left: 0, bottom: 1.1, right: 1.2 }
},
onmove: function (event) {
var target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
target.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
},
});
Pegass, спасибо за фикс. Единственное что для touch на Android не работает.

Отредактировано Web3r - 03.04.2015
2970
удалён @Foggy
Pegass, мелкая странная штука возникает на полсекунды вначале перетаскивания - курсор становится **********.
и ещё при добавлении нового окошка и в начале его перетаскивания, предыдущее созданное окошко немного дёргается то вправо, то влево оО
и если окошек много, дёргается всегда предыдущее созданное от того, которое таскаешь. вот ********** (прямая ссылка на видео-файл mp4). иногда даже на полсекунды создаётся уже удалённое окошко, чтобы дёрнуться и снова пропадает.
явно что-то с переменными напутал.

2615
Сергей @Pegass
Foggy пишет:

Pegass, мелкая странная штука возникает на полсекунды вначале перетаскивания - курсор становится **********.
и ещё при добавлении нового окошка и в начале его перетаскивания, предыдущее созданное окошко немного дёргается то вправо, то влево оО
и если окошек много, дёргается всегда предыдущее созданное от того, которое таскаешь. вот ********** (прямая ссылка на видео-файл mp4). иногда даже на полсекунды создаётся уже удалённое окошко, чтобы дёрнуться и снова пропадает.
явно что-то с переменными напутал.

не совсем так, это текущее дёргалось на место предыдущего - исправил,
а вот с курсором я пока не понял как им управлять при нативном драге