Скрипт не работает на мобильных устройствах. Только с мышью
Алексей Алексей

<meta charset="utf-8">
<?php
if(isset($GET['action']) && $_GET['action'] == 'send') {
mail('awhdru@gmail.com', 'Новый заказ',
"Имя: ".$_POST['name']."\n".
"Телефон: ".$_POST['phone']."\n".
"E-mail: ".$_POST['email']."\n".
"Услуги: ".$_POST['products']."\n".
"Сумма: ".$_POST['total_amount']);
die;
}
?>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--Тут темный лес-->
<script>
var total
amount = 0;

$(document).ready(function(){
$('.drag').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('id', $(this).attr('id'));
});
$('table td').on("dragenter dragover drop", function (event) {

event.preventDefault();
if(event.type === 'drop') {
if($(this).html() != '') {
return false;
}
var id = event.originalEvent.dataTransfer.getData('id', $(this).attr('id'));

  if($(this).attr('data-id') != id) {
    return false;
  }

  var el = $('#'+id);

  var amount = parseFloat(el.attr('data-amount'));

  if(el.attr('data-type') == 'in') {
    total_amount -= amount;
    el.attr('data-type', 'out');
  } else {
    el.attr('data-type', 'in');
    total_amount += amount;
  }

  $('#total-amount').html(total_amount + ' руб.');

        el.detach();
        el.appendTo($(this));   
    };

});
});

function sendMessage()
{
$('#success-message').show();
var products = '', amp = '';
$.each($('span[data-type=in]'), function() {
products += amp + $(this).attr('data-title');
amp = ', ';
})
$.post('?action=send', {
name: $('#name').val(),
phone: $('#phone').val(),
email: $('#email').val(),
products: products,
total_amount: $('#total-amount').html()
});
}

</script>
<!--Закончился лес-->
<style>
td {
height: 55px;
text-align: center;
}
</style>
<br>
<div class="container">
<table class="table table-bordered">
<!--Список услуг-->
<tr>
<td data-id=""><span id="" class="drag">Список услуг</span></td>
<td data-id="a1"><span id="a1" data-type="out" data-amount="100" data-title="Услуга 1" class="btn btn-default drag" draggable="true">100 руб.<p>Услуга 1</p></span></td>
<td data-id="a2"><span id="a2" data-type="out" data-amount="200" data-title="Услуга 2" class="btn btn-default drag" draggable="true">200 руб.<p>Услуга 2</p></span></td>
<td data-id="a3"><span id="a3" data-type="out" data-amount="300" data-title="Услуга 3" class="btn btn-default drag" draggable="true">300 руб.<p>Услуга 3</p></span></td>
<td data-id="a4"><span id="a4" data-type="out" data-amount="400" data-title="Услуга 4" class="btn btn-default drag" draggable="true">400 руб.<p>Услуга 4</p></span></td>
<td data-id="a5"><span id="a5" data-type="out" data-amount="300" data-title="Услуга 5" class="btn btn-default drag" draggable="true">300 руб.<p>Услуга 5</p></span></td>
<td data-id="a6"><span id="a6" data-type="out" data-amount="500" data-title="Услуга 6" class="btn btn-default drag" draggable="true">500 руб.<p>Услуга 6</p></span></td>
</tr>
<!--Типо карзина-->
<tr>
<td data-id=""><span id="" class="drag">Выбранные услуги</span></td>
<td data-id="a1"></td>
<td data-id="a2"></td>
<td data-id="a3"></td>
<td data-id="a4"></td>
<td data-id="a5"></td>
<td data-id="a6"></td>
</tr>
</table>
<!--Сумма заказа-->
Сумма: <span id="total-amount">0 руб.</span>
<br>
<br>
<button data-toggle="modal" data-target="#order-modal" class="btn btn-success" onclick="">Заказать</button>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="order-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Оформить заказ</h4>
</div>
<div class="modal-body">
<div id="success-message" class="alert alert-success" style="display: none">Ваш заказ успешно отправлен</div>
<form>
<div class="form-group">
<label>Ваше имя: </label>
<input id="name" type="text" class="form-control">
</div>
<div class="form-group">
<label>Ваше телефон: </label>
<input id="phone" type="text" class="form-control">
</div>
<div class="form-group">
<label>Ваше email: </label>
<input id="email" type="text" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
<button type="button" class="btn btn-primary" onclick="sendMessage()">Оформить заказ</button>
</div>
</div>
</div>
</div>

Алексей Алексей около 1 года назадСпасибо 0
0 чел.