2

На iOS такое поведение у toggle-переключателей, т.е. можно кликнуть или перетащить зажатием.

Пока нашёл вот такое (только клик): https://codepen.io/designcouch/pen/sDAvk

<input type="checkbox" name="checkbox1" id="checkbox1" class="ios-toggle" checked/>
<label for="checkbox1" class="checkbox-label" data-off="off" data-on="on"></label>

-webkit-transition:.25s ease-in-out;
-moz-transition:.25s ease-in-out;
-o-transition:.25s ease-in-out;
transition:.25s ease-in-out;
3
  • Почти классика DnD - на mousedown ставим флаг, по mosemove обрабатываем...
    – DNS
    3 апр 2017 в 13:01
  • @DNS Ну то есть на JS только? Я то надеялся вдруг что то появилось.
    – user208916
    3 апр 2017 в 13:03
  • 1
    За новости - подождем, может кто знает... Я сторонник классики. Чужими руками хорошей вещи не сделаешь
    – DNS
    3 апр 2017 в 13:05

2 ответа 2

3

var sizeSwitch = 36;
var box = $('.box');
var input = $('#sw');
var switchHandle = $('#switch .handle');
var on =  $('#on');
var off =  $('#off');
var switchArea =  $('#switch');

switchHandle.draggable({
  axis: 'x',
  containment: 'parent',
  stop: function() {
    conditionMove();
  }
});

on.click(function() {
  on.addClass('active');
  off.removeClass('active');
  box.addClass('on-box').removeClass('off-box');
  input.checked == true;
  switchHandle.animate({
    left: 0
  }, 100);
});

off.click(function() {
  off.addClass('active');
  on.removeClass('active');
  box.addClass('off-box').removeClass('on-box');
  input.checked == false;
  switchHandle.animate({
    left: sizeSwitch + 'px'
  }, 100);
});

switchArea.click(function() {
  conditionMoveSnap();
});


function conditionMove() {
  if(parseInt(switchHandle.css('left')) <= (sizeSwitch / 2)) {
    switchHandle.animate({
      left: 0
    }, 100);
    on.addClass('active');
    off.removeClass('active');
    box.addClass('on-box').removeClass('off-box');
    input.checked == true;
  }
  else {
    switchHandle.animate({
      left: sizeSwitch + 'px'
    }, 100);
    off.addClass('active');
    on.removeClass('active');
    box.addClass('off-box').removeClass('on-box');
    input.checked == false;
  }
}

function conditionMoveSnap() {
  if(parseInt(switchHandle.css('left')) == sizeSwitch) {
    switchHandle.animate({
      left: 0
    }, 100);
    on.addClass('active');
    off.removeClass('active');
    box.addClass('on-box').removeClass('off-box');
    input.checked == true;
  }
  else {
    switchHandle.animate({
      left: sizeSwitch + 'px'
    }, 100);
    off.addClass('active');
    on.removeClass('active');
    box.addClass('off-box').removeClass('on-box');
    input.checked == false;
  }
}
* {
  box-sizing: border-box;
}

label {
  display: block;
}

#sw {
  display: none;
}

.box {
  margin: 5rem auto;
}

.option {  
  display: block;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #A8B1BB;
  padding: 8px 20px;  
  float: left;
  cursor: pointer;
  width: 60px;
  opacity: 0;
  transition: opacity .25s ease-in-out;
}
.option#on {
  text-align: right;
}
.option#off {
  text-align: left;
}
.option.active {
  color: #1fc1c8;
  opacity: 1;
}

#switch {
/*   background: #1fc1c8; */
  box-shadow: inset 0 0 0 46px #1fc1c8, 
              0 0 0 0px #1fc1c8;
  cursor: pointer;
  display: block;
  position: relative;
  float: left;
  height: 40px;
  width: 72px;
  padding: 1px;
  -moz-border-radius: 56px;
  -webkit-border-radius: 56px;
  border-radius: 56px;
  transition: .25s ease-in-out;
}

#switch .handle {
  display: block;
  background: #fff;
  height: 36px;
  width: 36px;
  top: 0px;
  left: 0px;
  right: auto;
  border-radius: 50%;
  box-shadow: 0 0 0 2px transparent, 
              0 3px 3px rgba(0,0,0,.3);
}

.box.off-box #switch {
  background: #f8f8f8;
  box-shadow: inset 0 0 0 0px #1fc1c8, 0 0 0 2px #dddddd;
}

.box.off-box #switch .handle{
  box-shadow: 0 3px 3px rgba(0,0,0,.2), 0 0 0 2px #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<div class="box">
  <input type="checkbox" name="sw" id="sw" checked/>
  <label for="sw">
    <span id="on" class="option active">on</span>
    <div id="switch">
      <span class="handle"></span>
    </div>
    <span id="off" class="option">off</span>
  </label>
</div>

Источники вдохновения: ваш пример + пример2

P.S: Это не идеал, а всего лишь идея. Можно доделывать\переделывать под свои нужды.

0

Благодаря HTML5, DnD теперь делается на коленке за 2 минуты.Не надо мучится с базовыми событиями мышки и писать простынку на пару экранов, чтобы перетащить элемент из одного div в другой.

    function drop(ev, checked) {
        ev.preventDefault();
        ev.target.appendChild(document.getElementById("d"));
        document.getElementById("d").checked=checked;
    }
div{
   width:40px;
   height:40px;
   border:1px solid black;
   float:left;
}
<div ondrop="drop(event,true)" ondragover="event.preventDefault()">
    <input id="d" type="checkbox" draggable="true" ondragstart="event.dataTransfer.setData('text', event.target.id);" checked/>
</div>
<div ondrop="drop(event,false)" ondragover="event.preventDefault()"></div>

4
  • Почему то не работает...
    – user208916
    3 апр 2017 в 13:56
  • caniuse.com/#search=draggable
    – Darth
    3 апр 2017 в 14:06
  • А как сделать анимацию перемещения переключателя?
    – user208916
    3 апр 2017 в 14:18
  • У меня в хроме последней версии все работает, но идея,наверное, в том чтобы не сам чекбокс перетаскивать, а вот галочку. Т.е. чекбокс сам на все 2 ячейки шириной, а галочка с одного в другой должна перетаскиваться.
    – SVE
    4 апр 2017 в 7:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.