Действие при удерживании

@acupation · Регистрация: 26.03.2010

Студворк — интернет-сервис помощи студентам

Доброго времени суток!
Не могу найти ничего похожего и нет идей как написать плагин. Буду рад любой помощи.

Суть: Нужно при нажатии и удержании левой кнопки мыши выводить div поверх курсора. div разделен на 3 части. При удерживании можно выбрать один из этих 3 div-ов наведя на него и отпустив кнопку мыши. То есть должна выполняться одна из 3 функций, которые присвоены каждому из div-ов.

@acupation · 20.08.2011, 12:23 **[ТС]**

Частично сделал. Не получается последняя функция... Может поможет кто?
На страничке

HTML5
1
2
3
4
5
6
7
8
9
<div style='width: 23px; height: 68px; display:none; z-index: 100;' id='ex11'>
<div style='position: absolute; width: 23px; height: 68px; z-index: 1; left: 10px; top: 15px; background-image:url(test1/design/userblok/chel.png)' id='layer1'>
<div id='golova' onmouseover=vibkra('golova'); mousedown=\"vibnokra('golova'); hodbat('udar', 'golova');\" style='position: absolute; width: 23px; height: 10px; left: 0px; top: 0px;'></div>
<div id='levru' onmouseover=vibkra('levru'); mousedown=\"vibnokra('levru'); hodbat('udar', 'levru');\" style='position: absolute; width: 5px; height: 32px; left: 0px; top: 10px;'></div>
<div id='tulo' onmouseover=vibkra('tulo'); mousedown=\"vibnokra('tulo'); hodbat('udar', 'tulo');\" style='position: absolute; width: 13px; height: 32px; left: 5px; top: 10px;'></div>
<div id='praru' onmouseover=vibkra('praru'); mousedown=\"vibnokra('praru'); hodbat('udar', 'praru');\" style='position: absolute; width: 5px; height: 32px; left: 18px; top: 10px;'></div>
<div id='nogi' onmouseover=vibkra('nogi'); mousedown=\"vibnokra('nogi'); hodbat('udar', 'nogi');\" style='position: absolute; width: 23px; height: 26px; left: 0px; top: 42px;'></div>
</div>
</div>

jquery.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
(function($){
    $.fn.drag = function(o){
        var o = $.extend({
            start:function(){},   // при начале нажатия
            stop:function(){} // при завершении нажатия
        }, o);
        return $(this).each(function(){
            var d = $(this); // получаем текущий элемент
            var b = $('#ex11'); // название второго элемента
            d.mousedown(function(e){ // при удерживании мыши
                d.css('position','absolute');
                b.css('position','absolute');
                $(document).unbind('mouseup'); // очищаем событие при отпускании мыши
                o.start(d); // выполнение пользовательской функции
                var f = d.offset(); // находим позицию курсора относительно элемента
                var heel = b.height() / 2.9;   // ровняем
                var wiel = b.width() / 4;      // ровняем
                b.css('display','block');      // показываем 2 блок
                b.css({'top' : f.top - heel + 'px','left' : f.left - wiel + 'px'}); // двигаем блок
                $(document).mousemove(function(a){ // при перемещении мыши
 
                });
                $(document).mouseup(function(){  // когда мышь отпущена
                    $(document).unbind('mousemove'); // убираем событие при перемещении мыши
                    o.stop(d); // выполнение пользовательской функции
                    b.css('display','none');   // убираем 2 блок
                });
                return false;
            });
        });
    }
})(jQuery);

Передача ajax и функция выделения

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function vibkra(dqa){
$(function() {
$('#' + dqa).css('background-color','#f11');
});
}
function vibnokra(dqf,cvs){
$('#' + cvs).css('background-color','');
}
function hodbat(kakho, kudakogo) {
    $.post("../test1/ajax/battle.php",
    {
        act: "deist",
        nuikak: kakho,
        thtoeto: kudakogo
    },
    function (result) {
            try {
    eval(result);
                }
        catch (e)   {
        alert(result);
                    }
 
     });
      }

ajax

PHP
1
2
3
4
5
6
7
8
9
10
11
12
if ($_POST['act']=="deist") {
    if($_POST['nuikak'] == 'udar') {
    $hodstar2 = $_POST['thtoeto'];
    if($hodstar2=='golova'){ $perevod="голову"; }
    elseif($hodstar2=='levru'){ $perevod="левую руку"; }
    elseif($hodstar2=='tulo'){ $perevod="тело"; }
    elseif($hodstar2=='praru'){ $perevod="правую руку"; }
    elseif($hodstar2=='nogi'){ $perevod="ноги"; }
    $log = "Удар в ".$perevod."";
 
    }
    echo "  ".$log." ";

Частично вырезал, может где лишнее срезал, но суть понятна.

Вопрос вот в чем - mousedown на второй div не прокатывает, думал onmouseout - тоже не подходит, если перемещаешь - все заносит. А нужно только если отпустили клавишу. То есть он не фокусируется на свежепоявившемся диве. Как быть?

@borovik · 20.08.2011, 12:44

вот у меня есть рабойчий вариант

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<html>
    <head>
        <title></title>
        <script type="text/javascript" src="jquery-1.6.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".cont").mousedown(function(e){
                    $(".cm").css({top: ''+e.pageY-48, left: ''+e.pageX-80}).show("fast");
                    $("li").mouseup(function(){
                        alert('Ты выбрал: '+$(this).text()+"");
                    })
                });
                $(document).mouseup(function(){
                    $(".cm").hide("fast");
                });
            });
        </script>
        <style type="text/css">
            .cont{
                width: 60%;
                height: 30px;
                padding: 5px;
                margin: 5px;
                background-color: #D6E8F1;    
                border-radius: 5px;
                -moz-user-select: -moz-none;
            }
            .cont:hover{
                background-color: coral;
                cursor: pointer;
            }
            li{
                width: 100px;
                padding: 2px;
                background-color: lightcyan;
                box-shadow: 2px 2px 5px #888;
            }
            li:hover{
                background-color: #f00;
                cursor: pointer;
            }
            .cm{
                display: none;
                position: absolute;
                -moz-user-select: -moz-none;
            }
        </style>
    </head>
    <body>
        <div class="cont">Проверка документов на автомобиль перед техосмотром должна занимать не более 5 минут</div>
        <div class="cont">Porsche 911 – один из самых консервативных автомобилей в мире, облик которого не менялся с появления первого поколения.</div>
        <div class="cont">Создатели видеоблога на AutoNews.ru в своей новой публикации собрали записи с места резонансной трагедии на Сухаревской площади.</div>
        <div class="cont">Новую модель премиальной японской марки все ждали с нетерпением: неужели Infiniti собирается выпустить минивэн.</div>
        
        <div class="cm">
            <ul type="none">
                <li>Добавить</li>
                <li>Удалить</li>
                <li>Изменить</li>
            </ul>
        </div>
    </body>
</html>

@acupation · 20.08.2011, 13:48 **[ТС]**

borovik, Спасибо. Правда у меня при тесте если второй раз пытаешься выбрать, то после выбора алерт 2 раза выскакивает, если третий раз - 3 раза))

Добавлено через 55 минут
Как предотвратить повторения?

@borovik · 20.08.2011, 13:59

я сам не понимаю почему так происходит по логике программы так не должно быть хмхмхмхмхм

@acupation · 20.08.2011, 14:00 **[ТС]**

Ну вообще да, вот ищу тоже решение...

@borovik · 20.08.2011, 14:16

скобки не так поставил
вот

JavaScript
1
2
3
4
5
6
7
8
9
10
11
          $(document).ready(function(){            
              $(".cont").mousedown(function(e){              
                  $(".cm").css({top: ''+e.pageY-48, left: ''+e.pageX-80}).show("fast");        
              }); 
              $("li").mouseup(function(){           
                  alert('Ты выбрал:'+$(this).text());    
              });       
              $(document).mouseup(function(){      
                  $(".cm").hide("fast");            
              });            
          });

http://jsfiddle.net/tZcPK/1/

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@acupation 67 / 67 / 6 Регистрация: 26.03.2010 Сообщений: 546

	Действие при удерживании 19.08.2011, 21:01. Показов 8398. Ответов 6 Метки нет (Все метки) Доброго времени суток! Не могу найти ничего похожего и нет идей как написать плагин. Буду рад любой помощи. Суть: Нужно при нажатии и удержании левой кнопки мыши выводить div поверх курсора. div разделен на 3 части. При удерживании можно выбрать один из этих 3 div-ов наведя на него и отпустив кнопку мыши. То есть должна выполняться одна из 3 функций, которые присвоены каждому из div-ов. Миниатюры 0

@acupation 67 / 67 / 6 Регистрация: 26.03.2010 Сообщений: 546
	20.08.2011, 13:48 [ТС]
	borovik, Спасибо. Правда у меня при тесте если второй раз пытаешься выбрать, то после выбора алерт 2 раза выскакивает, если третий раз - 3 раза)) Добавлено через 55 минут Как предотвратить повторения? 0

@borovik 210 / 204 / 52 Регистрация: 25.07.2010 Сообщений: 1,162
	20.08.2011, 13:59
	я сам не понимаю почему так происходит по логике программы так не должно быть хмхмхмхмхм 0

@acupation 67 / 67 / 6 Регистрация: 26.03.2010 Сообщений: 546
	20.08.2011, 14:00 [ТС]
	Ну вообще да, вот ищу тоже решение... 0