как сделать draggable

SPoX · 20 Мар 2017

привет всем как дела?
во первых извиняюсь не знаю как на русском языке будет правилно перевести слово draggable

и так у меня есть блок календарь матчей

HTML:

Код:

<div class="game_new_container">
<div class="game_container">
<div class="game_item">
<div class="game_date">19 Марта 2017, 20:30</div>
<div class="game_team">Гладбах<span>0</span></div>
<div class="game_team">Бавария<span>1</span></div>
<div class="game_cup">Бундеслига</div>
<img src="/uploads/logo1.png" class="game_crest" alt="" />
<div class="game_data_container">
<div class="game_data silver"><a href="#">Статистика</a></div>
<div class="game_data silver"><a href="#">Комментарии</a></div>
<div class="game_data silver"><a href="#">Видео обзор</a></div>
<div class="game_data silver"><a href="#">Оценки</a></div>
</div>
</div>
<div class="game_item">
<div class="game_date">1 Апрель 2017, 17:30</div>
<div class="game_team">Бавария<span>?</span></div>
<div class="game_team">Аугсбург<span>?</span></div>
<div class="game_cup">Бундеслига</div>
<img src="/uploads/logo1.png" class="game_crest" alt="" />
<div class="game_data_container">
<div class="game_data silver"><a href="#">LIVE</a></div>
<div class="game_data silver"><a href="#">Анонс</a></div>
<div class="matchdata">
<script type="text/javascript">/*<![CDATA[*/document.write('<span id="tarigi">.</span>');function ojidanieNG(){var f=new Date();var h=new Date("April 01, 2017 17:30");var c=(h.getTime()-f.getTime());var i=c/86400000;var a=Math.floor(i);var e=(i-a)*24;var j=Math.floor(e);var b=(e-j)*60;var g=Math.floor(b);var d=Math.floor((b-g)*60);if(h.getTime()>f.getTime()){document.getElementById("tarigi").innerHTML="До матча осталось<br>"+a+" дней "+j+":"+g+":"+d+""}else{document.getElementById("tarigi").innerHTML="<b>Матч начался</b>"}}setInterval("ojidanieNG()",50);/*]]>*/</script>
</div>
</div>
</div>
</div>
<div class="game_bar right">
<a id="0" class="active"><span>Следующий матч</span></a><a id="-269"><span>Предыдущий матч</span></a> <div class="bar_line"></div>
</div>
</div>

Javascript:

Код:

/* matches */
$(function() {
    $(".game_new_container .game_bar a").click(function(e) {
        _offset = $(this).attr("id");
        _idn = $(this).attr("id");
        _parent = $(this).parents(".game_new_container").children(".game_container");
        _bar = $(this).parents(".game_bar").children(".bar_line");
        _isinvert = $(this).parents(".game_new_container").hasClass("invert");
        _container = $(this).parents(".game_new_container");
       
        $(this).parents(".game_bar").children("a").removeClass("active");
        $(this).addClass("active");

        if (_offset == 0) {
            _bar.animate({"width": "35px"}, { duration: 400, queue: false });   
        }
        if (_offset == -269) {
            _bar.animate({"width": "161px"}, { duration: 400, queue: false });   
        }
       
        if (_isinvert) {
            if (_container.hasClass("reserves")) {
                    _container.animate({"height": "220px"}, { duration: 300, queue: false });   
                } else {
                    _container.animate({"height": "250px"}, { duration: 300, queue: false });   
                }
            _parent.animate({"left": _offset+"px"}, { duration: 400, queue: false });   
        } else {
            _parent.animate({"right": _offset+"px"}, { duration: 400, queue: false });   
        }
       
    })
});

CSS:

Код:

.game_new_container {
    width: 269px;
    overflow: hidden;
    height: 250px;
    padding-top: 20px;
    position: relative
}
.game_new_container.heighted {
    height: 270px
}
.game_new_container.reserves {
    height: 220px
}
.game_new_container .game_container {
    white-space: nowrap;
    position: absolute;
    top: 5px;
    right: 0;
    width: 900px;
    text-align: right
}
.game_new_container.invert .game_container {
    right: auto;
    left: 0;
    text-align: left
}
.game_container .game_item {
    width: 229px;
    padding: 0 20px;
    white-space: normal;
    position: relative;
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: top;
    text-align: left
}
.game_container .game_date {
    margin: 0 0 6px 11px;
    height: 15px;
    overflow: hidden;
    font-size: 10px;
    width: 150px;
    color: #4b4b4b;
    line-height: 1.5em
}
.game_container .game_cup {
    padding: 1px 0 0 21px;
    margin: 6px 0 6px 11px;
    height: 15px;
    overflow: hidden;
    font-size: 10px;
    width: 150px;
    color: #4b4b4b;
    line-height: 1.5em;
    background: url(../images/cup.png) 0 0 no-repeat
}
.game_container .game_team {
    border: 1px solid #EFEFEF;
    padding: 7px 10px 6px 10px;
    overflow: hidden;
    font-size: 12px;
    width: 130px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin: 0 0 3px 0;
    position: relative;
    color: #1b1b1b
}
.game_container .game_team span {
    position: absolute;
    font-size: 12px;
    display: block;
    top: 7px;
    right: 10px;
    color: #FFFFFF;
    min-width: 15px;
    background-color: #989898;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center
}
.game_container img.game_crest {
    position: absolute;
    width: 70px;
    height: 70px;
    display: block;
    top: 16px;
    right: 20px
}
.game_container .game_data_container {
    margin: 0 -10px 0 0;
    padding: 5px 0 0 0
}
.game_container .game_data {
    background: url(../images/data.png) 0 -0 no-repeat;
    width: 112px;
    height: 27px;
    display: block;
    float: left;
    zoom: 1;
    *display: inline;
    vertical-align: top;
    margin: 0 7px 4px 0;
    overflow: hidden;
    font-size: 11px
}
.game_container .game_data.active {
    background: url(../images/data.png) 0 -27px no-repeat
}
.game_container .game_data.red.active {
    background: url(../images/data.png) 0 -54px no-repeat
}
.game_container .game_data.silver.active {
    background: url(../images/data.png) 0 0 no-repeat
}
.game_container .game_data a {
    display: block;
    width: 88px;
    height: 23px;
    text-align: center;
    padding: 5px 12px 0 12px;
    color: #727272
}
.game_container .game_data.active a {
    display: block;
    width: 88px;
    height: 23px;
    text-align: center;
    padding: 5px 12px 0 12px;
    color: #fff
}
.game_container .game_data.red.active a {
    color: #fff
}
.game_container .game_data.silver.active a {
    color: #999
}
.game_new_container .game_bar {
    background: url(../images/bar2.png) 0 35px no-repeat;
    height: 45px;
    padding: 0 0 4px 0;
    position: absolute;
    width: 234px;
    left: 18px;
    bottom: 15px;
    z-index: 2;
    overflow: hidden
}
.game_new_container.invert .game_bar {
    background: url(../images/bar2.png) -234px 35px no-repeat
}
.game_new_container .game_bar.right {
    text-align: right
}
.game_new_container .game_bar a {
    cursor: pointer;
    width: 117px;
    text-align: center;
    height: 45px;
    display: block;
    float: right;
    vertical-align: top;
    font-size: 10px;
    line-height: normal;
    text-decoration: none;
    color: #727272;
    position: relative;
    z-index: 4;
    white-space: nowrap
}
.game_new_container.invert .game_bar a {
    float: left
}
.game_new_container .game_bar .bar_line {
    background: url(../images/bar_line2.png) 0 0 no-repeat;
    position: absolute;
    bottom: -0;
    right: 10px;
    height: 20px;
    width: 35px;
    z-index: 3
}
.game_new_container.invert .game_bar .bar_line {
    background: url(../images/bar_line2.png) 100% -20px no-repeat;
    position: absolute;
    bottom: 0;
    left: 10px;
    right: auto;
    height: 20px;
    width: 35px;
    z-index: 3
}
.game_new_container .game_bar a span {
    color: #828282
}
.game_new_container .game_bar a.active span {
    color: #181818
}
.game_new_container .game_bar a:hover span {
    text-decoration: none;
    color: #c21b1b
}
.game_container .game_team em {
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: top;
    padding: 2px 0 0 0;
    line-height: 1.3em;
    font-size: 9px;
    color: #5d5d5d;
    font-style: normal
}
.matchdata {
    text-align: center;
    color: #000;
    font-size: 12px
}

.game_date:before {
    content: "\f073";
    font-size: 12px;
    font-family: FontAwesome;
    margin-right: 5px;
}

сейчас когда нажимаешь на Следующий матч или же Предыдущий матч работает слайдер
вот к стати демо Для просмотра ссылки Войди или Зарегистрируйся Блок Прошедшие матчи

как сделать чтобы слайдер менялось не на клик Следующий матч или же Предыдущий матч а чтобы бар было бы draggable

еще раз извините если что то непонятно объяснил
и за ранее спасибо за помощь

alex_me · 20 Мар 2017

В двух словах,

1. добавить обработчик draggable на a.active

$('.game_bar.right > .active').bind('dragstart', function (event) {
console.log(event.currentTarget);
});

2. Внутри обработчика определить в какую сторону перетаскивается активная кнопка (влево/вправо), например с помощью event.pageX
Для просмотра ссылки Войди или Зарегистрируйся

3. Вызвать клик на соответствующую кнопку слева или справа
$('.game_bar.right > a:not(.active)').trigger("click");
Лучше присвоить индексы каждой кнопке и имитировать клик по индексу

Также есть плагин для таких дел
Для просмотра ссылки Войди или Зарегистрируйся

SPoX · 20 Мар 2017

извиняюсь но я не так селен в javascript чтобы сам все сделать :conf:

можете написать что где надо менять в коде?

quiksilver · 28 Май 2017

Заюзай jquery slider Для просмотра ссылки Войди или Зарегистрируйся

как сделать draggable

SPoX

Знаток

alex_me

Постоялец

SPoX

Знаток

quiksilver

Писатель