Я новичок в веб-разработке, мне нужно создать пользовательский интерфейс состава списков с некоторыми функциями перетаскивания. Я нашел fiddel (http://jsfiddle.net/dkuntz2/28EH5/3/), который близок моему требованию.
HTML:
<div id="storyboard">
<div id="clips"></div>
<div id="timelineNcommands">
<div id="timelineCommands"></div>
<div id="timelineHolder">
<div id="timeline"></div>
</div>
</div>
</div>
<pre id="scratchpad"></pre>
CSS:
#storyboard #clips {
height: 100px;
width: 500px;
}
#storyboard .clip {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 50px;
width: 50px;
margin: 10px;
background: #d4d0ad;
border: 10px solid #d4d0ad;
overflow: hidden;
float: left;
z-index: 10;
}
#storyboard .clip h2 {
font-size: 1.2em;
margin: 0;
padding: 0 0 10px;
}
#storyboard .clip p {
margin: 0;
padding: 0;
}
#storyboard #timelineNcommands {
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 220px;
background: #f8f7f1;'enter code here'
border: 5px solid #dddabe;
overflow-x: scroll;
}
#storyboard #timelineNcommands #timelineHolder {
margin-left: -5px;
min-width: 100%;
}
#storyboard #timelineNcommands #timeline {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 70px;
float: left;
min-width: 100%;
}
JS:
$(document).ready(function() {
$("#timeline").sortable({
scroll: true,
axis: 'x',
})
$("#timeline").on('sortreceive', function(event, ui) {
setTimelineWidth(0);
});
$("#timeline").on('sortover', function(event, ui) {
setTimelineWidth(70);
})
var clipNums = [1, 2, 3, 4, 5]
$.each(clipNums, function(i, num) {
var div = $("<div/>", {
class: 'clip',
id: 'clip-' + num
}).html(
"<h2>" + num + "</h2>"
)
div.appendTo('#clips')
div.draggable({
revert: "invalid",
scroll: false,
helper: "clone",
connectToSortable: "#timeline",
containement: '#storyboard',
helper: function() {
$("#storyboard").append(
'<div id="clone" class="clip">' +
$(this).html() + '</div>'
);
return $("#clone");
}
})
})
})
function setTimelineWidth(extra) {
if ($("#timelineNcommands").width() < ($("#timeline").sortable('toArray').length * 70) + extra) {
$("#timeline").width(($("#timeline").sortable('toArray').length * 70) + extra + "px")
$("#scratchpad").html(($("#timeline").sortable('toArray').length * 70) + extra + "px")
}
else
$("#timeline").width("220");
}
Я плохо застрял в получении списка предметов, упавших и их порядок после составления...
и любое руководство по "использованию этого jsfiddle UI в приложениях asp.net" было бы действительно полезно.
Не могу дать вам правильный ответ для этого примера, но вы можете использовать метод serialize для получения правильного порядка ваших товаров, и это правильный способ его достижения. Однако метод serialize работает только в том случае, если сортируемый список id="key_value"
, то есть id="item_1"
, где "item" - это ключ и "1" значение. В этом примере я заметил, что вы можете иметь несколько клонов одного и того же элемента с одинаковыми идентификаторами (2 элемента на временной шкале с id = item_3), это невозможно.
Я также новичок в jquery, но у меня была такая же проблема в моем проекте и решена с использованием метода serialize.