Форумы портала PHP.SU :: Версия для печати :: Подсветка элемента вставки UI draggable

Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Подсветка элемента вставки UI draggable

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » Подсветка элемента вставки UI draggable

Страниц (1): [1]

1. 3d_killer - 20 Мая, 2016 - 20:15:19 - перейти к сообщению

Не могу решить вопрос, решил использовать UI draggable при перетаскивании событий в самопальном календаре, но не могу понять как можно подсвечивать ячейки сетки где находится в данный момент курсор при перетаскивании, а при бросании получить ту самую ячейку где бросили.

2. 3d_killer - 20 Мая, 2016 - 20:15:42 - перейти к сообщению

скрин
(Добавление)
сами события состоят из дивов с абсолютной позицией которые не находятся в таблице и расставляются после загрузки таблицы
(Добавление)
а ну собственно хоть что то из кода

CODE (javascript):
скопировать код в буфер обмена

 
$('.sob').draggable({
                containment: '.calendar_container',
                over: function() {
                $('.san').css('background','#666');
                        
                        },
                tolerance: "pointer",
                revert: true,
                zIndex:5
});
 

(Добавление)
дивы с классом .sob
(Добавление)

CODE (javascript):
скопировать код в буфер обмена

 $('.san').css('background','#666');
                       
                        }

это я уже мудрил, описания не нашел
(Добавление)
все разобрался сам

3. 3d_killer - 21 Мая, 2016 - 00:55:15 - перейти к сообщению

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

4. 3d_killer - 21 Мая, 2016 - 01:04:25 - перейти к сообщению

Вот как то так не понятно как решить весь инет перерыл в поисках похожей ситуации

5. 3d_killer - 21 Мая, 2016 - 13:13:40 - перейти к сообщению

в данный момент код такой

CODE (javascript):
скопировать код в буфер обмена

 
function drag(){
$('.calendar_table td').each(function() {
        $(this).droppable({
                over: function(event, ui) {$(this).addClass('select_td');},
                out: function(event, ui) {$(this).removeClass('select_td');
                },
                drop: function(event, ui) {
                        $(this).removeClass('select_td');
                                console.log($(this).data('day'));
                                console.log($(this).parent("tr").data('minute'));
                                console.log($(this).parent("tr").data('hour'));
                                console.log(ui.draggable.data('id'));
                                }}); 
    });
$('.sob').draggable({
                //containment: '.calendar_container',
                helper:'clone',
                opacity:0.55,
                tolerance: "touch",
                revert: true,
                zIndex:5,
                stack: ".draggable",
});}
 

6. Viper - 21 Мая, 2016 - 14:35:33 - перейти к сообщению

Вижу очередное изобретение велосипеда и тихо смеюсь Улыбка

Улыбка

7. 3d_killer - 21 Мая, 2016 - 15:16:15 - перейти к сообщению

в чем тут изобретение? использую плагин Jquery, что он не для этого предназначен?
это я просто показывал область для отладки

CODE (javascript):
скопировать код в буфер обмена

 
 drop: function(event, ui) {
                        $(this).removeClass('select_td');
                                console.log($(this).data('day'));
                                console.log($(this).parent("tr").data('minute'));
                                console.log($(this).parent("tr").data('hour'));
                                console.log(ui.draggable.data('id'));
                                }}); 
 

в итоге код:

CODE (javascript):
скопировать код в буфер обмена

 
function drag(){
$('.calendar_table td').each(function() {
        $(this).droppable({
                over: function(event, ui) {$(this).addClass('select_td');},
                out: function(event, ui) {$(this).removeClass('select_td');
                }});
    });
$('.sob').draggable({
                //containment: '.calendar_container',
                helper:'clone',
                opacity:0.55,
                tolerance: "touch",
                revert: true,
                zIndex:5,
                stack: ".draggable",
});}
 

И где велосипед? все по мануалу
(Добавление)
единственное что у меня не сходится это перетаскиваемая область больше области приемника и тут просто не могу разобраться как выбирать область по мышке а не посередине перетаскиваемого объекта
(Добавление)
а то как что то расставляется, ну велосипед да из 20 строк кода, в чем проблема?

8. armancho7777777 - 21 Мая, 2016 - 17:11:48 - перейти к сообщению

3d_killer пишет:

И где велосипед?

1. http://fullcalendar[dot]io/
2. http://jquerylabs[dot]com/wdcalendar[dot][dot][dot]ery-plugin-html/
...
http://g[dot]zeos[dot]in/?q=calendar%20js%20library

9. 3d_killer - 21 Мая, 2016 - 17:42:04 - перейти к сообщению

этот календарь я изначально рассматривал, но не нашел в нем типов событий
http://fullcalendar[dot]io
типо чтобы разными цветами подсветить разные события

10. 3d_killer - 21 Мая, 2016 - 23:47:08 - перейти к сообщению

почитал документацию, попробовал, этот мне подходит, демо у него убогое, но все там адаптируемо, спасибо за наводку

11. armancho7777777 - 28 Мая, 2016 - 15:09:19 - перейти к сообщению

Ещё:
http://www[dot]jqwidgets[dot]com/jquery-[dot][dot][dot]eduler/index[dot]htm
http://demos[dot]dojotoolkit[dot]org/dem[dot][dot][dot]lendar/demo[dot]html

12. 3d_killer - 28 Мая, 2016 - 17:52:33 - перейти к сообщению

спасибо я уже на fullcalendar сделал все и сдал

Powered by ExBB FM 1.0 RC1