Показать сообщение отдельно
  #1 (permalink)  
Старый 20.08.2015, 03:51
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

pattern module (передать переменную)
Возможно подобное?

var foo = (function () {
	
	var _smth; // this

	_bar = function () { // gonna be used here
    	alert(_smth);
    }

	return {
		bar: function (smth) {
			_smth = smth;
		}
	}
})();

foo.bar('something');


Использовать буду это для поиска элемента внутри контейнера, который будет передаваться в метод init, в модуле ниже:

var dgd = (function () {

	var _container = document.querySelector('.slider');
	var _controller = document.querySelector('.ctrl');

	/**
	 * [_getCoords]
	 * @param  {[object]} el [DOM node]
	 * @return {[integer]}    [return coordinates of element]
	 */
	var _getCoords = function (el) {

		return el.getBoundingClientRect().left + pageYOffset;
	};

	var _ctC, _ctrlC;

	/**
	 * [_start define coordinates and adding even listeners]
	 * @param  {[event]} e [onMouseDown]
	 * @return {[boolean]}   [disable selection start]
	 */
	var _start = function (e) {

		_ctrlC = _getCoords(_controller) - e.pageX;
		_ctC = _getCoords(_container);

		document.addEventListener('mousemove', _move);
		document.addEventListener('mouseup', _end);

		return false;
	};

	/**
	 * [_leftEdge]
	 * @param  {[integer]} pos [position of the controller in the container]
	 * @return {[integer]}     [0 or @param pos]
	 */
	var _leftEdge = function (pos) {

		return pos < 0 ? 0 : pos;
	};

	/**
	 * [_rightEdge]
	 * @param  {[integer]} pos [position of the controller in the container]
	 * @return {[integer]}     [right edge of container or @param pos]
	 */
	var _rightEdge = function (pos) {
		var edge = _container.offsetWidth - _controller.offsetWidth;

		return pos > edge ? edge : pos;
	};

	/**
	 * [_move makes controller draggable]
	 * @param  {[event]} e [onMouseMove]
	 */
	var _move = function (e) {

		var pos = e.pageX - _ctrlC - _ctC;
		var pLeft = pos;

		if (pos !== _leftEdge(pos)) {
			pLeft = _leftEdge(pos);
		}

		if (pos !== _rightEdge(pos)) {
			pLeft = _rightEdge(pos);
		}

		_controller.style.left = pLeft + 'px';
	};

	/**
	 * [_end dissable draggable]
	 * @param  {[event]} e [onMouseUp]
	 */
	var _end = function (e) {

		document.removeEventListener('mousemove', _move);
		document.removeEventListener('mouseup', _end);
	};

	return {
		init: function() {
            _container.addEventListener = function () {
            	return false;
            }
			_controller.addEventListener('mousedown', _start);
		}
	}
})();

dgd.init();


Вот рабочий пример:
http://jsfiddle.net/vtndsk3c/6/

Пример кода взят отсюда https://learn.javascript.ru/drag-and-drop#слайдер

btw. sorry for my English

Последний раз редактировалось Lemme, 20.08.2015 в 04:18.
Ответить с цитированием