Jquery элемент ввода типа "джойстик" - HTML и CSS

bondik · 30.09.2013, 23:22

Добрый вечер!
Подскажите может ктонибудь видел красивую реализацию в паблике, элемента ввода типа "джойстик".

Лубышев · 02.10.2013, 19:12

Таких не встречал, но можно сварганить. что именно вы хотите?

Naive · 02.10.2013, 21:17

может где на сайтах для одиноких женщин найдется?
// сори за оффтоп, не понял нифига

Лубышев · 03.10.2013, 14:19

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

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Джойстик</title>
<style>
.joistik{width:200px; height:200px; background:#eee; border:1px solid #ccc; position:relative;}
.joistmamipulator{width:20px; height:20px; position:absolute; border-radius:10px; background:#000; cursor:pointer;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>

<body>
<script>
var jswidth=0;
var jsheight=0;
var mnwidth=0;
var mnheight=0;
x=0;
y=0;
cx=0;
cy=0;


function inposition()
{
	$("#joistik .joistmamipulator").animate({left: cx+"px", top: cy+"px"});
}
$(document).ready(function(){

jswidth=$("#joistik").width();
jsheight=$("#joistik").height();
mnwidth=$("#joistik .joistmamipulator").width();
mnheight=$("#joistik .joistmamipulator").height();
cx=(jswidth/2)-(mnwidth/2);
cy=(jsheight/2)-(mnheight/2);
inposition();

	$("#joistik .joistmamipulator").mouseup(function(){ inposition();});
	$("#joistik .joistmamipulator").draggable({containment:[0+mnwidth/2,0+mnheight/2,jswidth-mnwidth/2,jsheight-mnheight/2]});
	$(document).mouseup(function(){inposition();});
	
})

setInterval(
function(){
var position=$("#joistik .joistmamipulator").position();
x=cx-position.left;	
y=cy-position.top;


//тут вот и будем делать все, что хотим
//например выведем в интупы значения джойстика
$("#ox").val(x);
$("#oy").val(y);
	},
1);


</script>

<div id="joistik" class="joistik">
	<div class="joistmamipulator"></div>

</div>
<input type="text" value="0" id="ox" /><br />
<input type="text" value="0" id="oy" />

</body>
</html>

bondik · 03.10.2013, 23:51

Большое спасибо!
Хорошая коленка, именно то что хотел. Только на ipad'е криво работает, буду разбираться.

Лубышев · 04.10.2013, 00:02

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

bondik · 04.10.2013, 00:06

Вот залил на тестовую страницу попробуйте зайдите с сенсорного устройства, не тянется. Думаю проблема в mouseup. Вот что нашел на stackoverflow. С утра попробую подправить.

bondik · 04.10.2013, 10:02

Пока успеха недобился, кто владеет версткой для Safari под ios поделитесь опытом пожалуйста.

Лубышев · 04.10.2013, 11:28

Попробуйте сделать манипулятор крупнее. видимо слетает курсор просто. и покажите что вы сделали

bondik · 04.10.2013, 13:23

Проблему решил, такой штукой:

Код:

(function ($) {
    // Detect touch support
    $.support.touch = 'ontouchend' in document;
    // Ignore browsers without touch support
    if (!$.support.touch) {
    return;
    }
    var mouseProto = $.ui.mouse.prototype,
        _mouseInit = mouseProto._mouseInit,
        touchHandled;

    function simulateMouseEvent (event, simulatedType) { //use this function to simulate mouse event
    // Ignore multi-touch events
        if (event.originalEvent.touches.length > 1) {
        return;
        }
    event.preventDefault(); //use this to prevent scrolling during ui use

    var touch = event.originalEvent.changedTouches[0],
        simulatedEvent = document.createEvent('MouseEvents');
    // Initialize the simulated mouse event using the touch event's coordinates
    simulatedEvent.initMouseEvent(
        simulatedType,    // type
        true,             // bubbles                    
        true,             // cancelable                 
        window,           // view                       
        1,                // detail                     
        touch.screenX,    // screenX                    
        touch.screenY,    // screenY                    
        touch.clientX,    // clientX                    
        touch.clientY,    // clientY                    
        false,            // ctrlKey                    
        false,            // altKey                     
        false,            // shiftKey                   
        false,            // metaKey                    
        0,                // button                     
        null              // relatedTarget              
        );

    // Dispatch the simulated event to the target element
    event.target.dispatchEvent(simulatedEvent);
    }
    mouseProto._touchStart = function (event) {
    var self = this;
    // Ignore the event if another widget is already being handled
    if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
        return;
        }
    // Set the flag to prevent other widgets from inheriting the touch event
    touchHandled = true;
    // Track movement to determine if interaction was a click
    self._touchMoved = false;
    // Simulate the mouseover event
    simulateMouseEvent(event, 'mouseover');
    // Simulate the mousemove event
    simulateMouseEvent(event, 'mousemove');
    // Simulate the mousedown event
    simulateMouseEvent(event, 'mousedown');
    };

    mouseProto._touchMove = function (event) {
    // Ignore event if not handled
    if (!touchHandled) {
        return;
        }
    // Interaction was not a click
    this._touchMoved = true;
    // Simulate the mousemove event
    simulateMouseEvent(event, 'mousemove');
    };
    mouseProto._touchEnd = function (event) {
    // Ignore event if not handled
    if (!touchHandled) {
        return;
    }
    // Simulate the mouseup event
    simulateMouseEvent(event, 'mouseup');
    // Simulate the mouseout event
    simulateMouseEvent(event, 'mouseout');
    // If the touch interaction did not move, it should trigger a click
    if (!this._touchMoved) {
      // Simulate the click event
      simulateMouseEvent(event, 'click');
    }
    // Unset the flag to allow other widgets to inherit the touch event
    touchHandled = false;
    };
    mouseProto._mouseInit = function () {
    var self = this;
    // Delegate the touch handlers to the widget's element
    self.element
        .on('touchstart', $.proxy(self, '_touchStart'))
        .on('touchmove', $.proxy(self, '_touchMove'))
        .on('touchend', $.proxy(self, '_touchEnd'));

    // Call the original $.ui.mouse init method
    _mouseInit.call(self);
    };
})(jQuery);

Ссылка на источник.

30.09.2013, 23:22	#1
bondik Форумчанин Регистрация: 24.04.2008 Сообщений: 300	Jquery элемент ввода типа "джойстик" Добрый вечер! Подскажите может ктонибудь видел красивую реализацию в паблике, элемента ввода типа "джойстик".

02.10.2013, 19:12	#2
Лубышев Участник клуба Регистрация: 23.07.2007 Сообщений: 1,054	Таких не встречал, но можно сварганить. что именно вы хотите? Писано по д'Эльфийски

02.10.2013, 21:17	#3
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	может где на сайтах для одиноких женщин найдется? // сори за оффтоп, не понял нифига Alar, верни репу!

04.10.2013, 00:02	#6
Лубышев Участник клуба Регистрация: 23.07.2007 Сообщений: 1,054	ну задавайте вопросы, говорите что хотите, где косяки, попробуем помочь) Писано по д'Эльфийски

04.10.2013, 11:28	#9
Лубышев Участник клуба Регистрация: 23.07.2007 Сообщений: 1,054	Попробуйте сделать манипулятор крупнее. видимо слетает курсор просто. и покажите что вы сделали Писано по д'Эльфийски

03.10.2013, 23:51	#5
bondik Форумчанин Регистрация: 24.04.2008 Сообщений: 300	Большое спасибо! Хорошая коленка, именно то что хотел. Только на ipad'е криво работает, буду разбираться.

04.10.2013, 00:06	#7
bondik Форумчанин Регистрация: 24.04.2008 Сообщений: 300	Вот залил на тестовую страницу попробуйте зайдите с сенсорного устройства, не тянется. Думаю проблема в mouseup. Вот что нашел на stackoverflow. С утра попробую подправить.

04.10.2013, 10:02	#8
bondik Форумчанин Регистрация: 24.04.2008 Сообщений: 300	Пока успеха недобился, кто владеет версткой для Safari под ios поделитесь опытом пожалуйста.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Неявное преобразование типа "string" в "int" невозможно	artscorp	C# (си шарп)	4	10.02.2013 20:59
Как заменить "." в TextBox на "/" после ввода??	uralshans	Microsoft Office Excel	7	07.01.2013 20:14
Как "повесить " передачу данных из формы на событие нажатия кнопки типа "button" ?	vedro-compota	JavaScript, Ajax	10	14.12.2010 21:05
Как обойти "преобразование типа из "string" в "float" невозможно"	lexluter1988	Помощь студентам	1	07.08.2010 12:23
На чем пишутся стратегии типа "Казаков" и "Эпохи империи"	Tayfun	Свободное общение	3	26.06.2007 20:27