про ересь, пытаюсь ещё сделать аккардион, в общем что бы не портить картину, уберу сейчас))
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/js/jquery-ui-1.9.2.custom.js"></script>
<link type="text/css" href="css/custom-theme/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<style>
body{padding:15px;}
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
#sortable{ min-height: 200px;
width:250px;
background: #e6e6e6 url(/css/custom-theme/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;}
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable li" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
$("#trash").droppable({
accept: "#sortable li",
drop: function (event, ui) {
ui.draggable.hide("slow", function () {
$(this).remove();
verify()
})
function verify() {
var texts = [];
$("#sortable li").each(function (indx, element) {
texts.push($(element).text() + " ")
});
$(".out").html(texts)
}
}
})
});
</script>
</head>
<body>
<ul id="draggable">
<li class="ui-state-default">
<h3>Section 1</h3>
<div>
<input type="text" name="name"/>
</div></li>
<li class="ui-state-default"><h3>Section 1</h3>
<div>
<input type="text" name="name2"/>
</div></li>
</ul>
<form method="post">
<ul id="sortable">
<li class="ui-state-default">Уже готовый модуль</li>
</ul>
<input type="submit" name="go" value='Go'/>
</form>
<div class="out"></div>
<img src="http://www.specodegdaopt.ru/data/medium/korzina_dlya_musora_plats..jpg" alt="" id="trash" width="100" height="120">
<?php
if(isset($_POST['go'])){
echo $_POST['name'];
}
?>
</body>
</html>
Вот что имеем Убрал всё не нужное, что бы не было ереси. И так, не удаляет толково, не смотря на то, что обьект пропадает с поля зрения, он всё так же занимает место в родительском ul, сортируется. В общем это не удаляет его совсем |
xTODx,
ломайте дальше -- копируйте пожалуйста внимательнее!!!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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>
<style type='text/css'>
body{font:0.8em Arial,sans-serif}
h1{font-size:1.2em;text-align:center}
.wrapper{margin:20px auto}
#block1,#block2,.out{border:solid 1px #555555;margin:10px;padding:20px;-moz-border-radius:5px;-webkit-border-radius:5px;float:left;min-width:100px}
.textBlock{border:solid 1px #333333;font-weight:bold;margin:10px 0 5px 0;padding:10px;text-align:center;background:#eee;-moz-border-radius:3px;-webkit-border-radius:3px}
.dropHere{background:#e7e7de}
.table_drop{width:400px;height:}
</style>
<link type="text/css" href="css/custom-theme/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<style>
body{padding:15px;}
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
#sortable{ min-height: 200px;
width:250px;
background: #e6e6e6 url(/css/custom-theme/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;}
</style>
<script>
$(function() {
function verify() {
var texts = [];
$("#sortable li").each(function (indx, element) {
texts.push($(element).text() + " ")
});
$(".out").html(texts)
}
$( "#sortable" ).sortable({
stop: verify
});
$( "#draggable li" ).draggable({
connectToSortable: "#sortable",
helper: "clone"
});
$( "ul, li" ).disableSelection();
$("#trash").droppable({
accept: "#sortable li",
drop: function (event, ui) {
ui.draggable.hide("slow", function () {
$(this).remove();
verify()
})
}
})
});
</script>
</head>
<body> <div class="out"></div>
<ul id="draggable">
<li>
<h3>Section 1</h3>
<input type="text" name="name"/>
</li>
<li>
<h3>Section 2</h3>
<input type="text" name="name2"/>
</li>
</ul>
<form method="post">
<ul id="sortable">
<li >Уже готовый модуль</li>
</ul>
<input type="submit" name="go" value='Go'/>
</form>
<img src="http://www.specodegdaopt.ru/data/medium/korzina_dlya_musora_plats..jpg" alt="" id="trash" width="100" height="120">
</body>
</html>
|
Хм, действительно. что то где то промазал, удаляет, хотя пропали стили почему то... что у меня было не так то??
нужный обьект создавало, но почему то и создавало ещё один, когда начинал перетаскивать с сортабле. теперь осталось придумать как создать массив, передать его в php, и как пометить номерами обьекты. Да, то что можно выводить содержимое их, это хорошо.. но не то что нужно, к сожалению... в общем, огромнейшее вам спасибо, добрейший человек, на сегодня хватит, глаза уже закрываются, буду рад если вы завтра мне подскажете, как пометить элемент номерами. Возможно станет понятней если расскажу что делаю. В общем выводит в draggable все блоки, я перетаскиваю нужные, каждый можно открыть, и задать параметри типа имя, выводить ли имя, и в некоторых ещё textarea. После этого я нажимаю на кнопку, оно обрабатывается, и записывает в базу данных, в поле position пишет позицию, в name соответственно имя и т.д. Прошу прощения если я что делаю не так, я учусь... поэтому и пишу.. мне очень стыдно что в js я слаб, но я и пишу здесь, что бы помогли разобраться... |
xTODx,
ваш код и мой сравните-- функция verify засунута куда попало -- вывод этой фунции отсутствует -- классы я ваши убрал хотите вертайте -- только id разные всегда и везде. всё я пас читайте доки. |
Спасибо в общем огромное)) попробуем ещё, ну раз пас, просьба одна, я выложу чуть позже ещё, куда продвинулся, посмотрите? нужно что бы кто то тыкнул пальцем и сказал "можно сделать легче", либо "не правильно"
|
| Часовой пояс GMT +3, время: 03:55. |