<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2 class="text-center"><b>文本生成系统人工评估</b></h2>
<div class="row">
<div class="col-md-12 text-center">
<div class="box">
<div class="box-content">
<hr />
<h3>请对下面句子进行拖动排序,考虑句子的流畅性
<h3>从优到劣,把你认为更接近自然语言的句子排在第一位。</h3>
<a><h3>评价指标说明</h3></a>
</p>
<br />
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<section class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<section class="panel no-radius even-margin">
<section class="panel-body">
<section id="connected">
<ul class="connected list">
<li>a man is near a motorcycle in an open field </li>
<li>a man standing next to a bicycle parked in front of a building</li>
<li>a man prepares a pulling pink shoes </li>
<li>a man sitiing on a desk covered kitchen with papers</li>
</ul>
<ul class="connected list no2">
</ul>
</section>
</section>
</section>
</section>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<button id="button1id" name="button1id" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
.connected, .sortable, .exclude, .handles {
margin: auto;
padding: 0;
width: 310px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sortable.grid {
overflow: hidden;
}
.connected li, .sortable li, .exclude li, .handles li {
color: #313135;
list-style: none;
border: 1px solid #e8e8e8;
background: #fff;
font-family: "Tahoma";
margin: 5px;
padding: 10px 6px;
box-shadow: 1px 2px 4px #d6d6d6;
cursor:pointer;
}
.no2 > li{
color:#fff;
background:#56b5e3;
border: 1px solid #56b5e3;
}
.handles span {
cursor: move;
}
li.disabled {
opacity: 0.5;
}
.sortable.grid li {
line-height: 80px;
float: left;
width: 80px;
height: 80px;
text-align: center;
}
li.highlight {
background: #edede5;
}
#connected {
width: 60%;
overflow: hidden;
margin: auto;
}
.connected {
float: left;
width: 48%;
min-height:289px;
background:#f6f6f6;
margin:5px;
}
.connected.no2 {
float: right;
}
.sortable-placeholder {
background:#e8e8e8;
padding: 10px 6px;
}
(function($) {
var dragging, placeholders = $();
$.fn.sortable = function(options) {
var method = String(options);
options = $.extend({
connectWith: false
}, options);
return this.each(function() {
if (/^enable|disable|destroy$/.test(method)) {
var items = $(this).children($(this).data('items')).attr('draggable', method == 'enable');
if (method == 'destroy') {
items.add(this).removeData('connectWith items')
.off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s');
}
return;
}
var isHandle, index, items = $(this).children(options.items);
var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">');
items.find(options.handle).mousedown(function() {
isHandle = true;
}).mouseup(function() {
isHandle = false;
});
$(this).data('items', options.items)
placeholders = placeholders.add(placeholder);
if (options.connectWith) {
$(options.connectWith).add(this).data('connectWith', options.connectWith);
}
items.attr('draggable', 'true').on('dragstart.h5s', function(e) {
if (options.handle && !isHandle) {
return false;
}
isHandle = false;
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = 'move';
dt.setData('Text', 'dummy');
index = (dragging = $(this)).addClass('sortable-dragging').index();
}).on('dragend.h5s', function() {
if (!dragging) {
return;
}
dragging.removeClass('sortable-dragging').show();
placeholders.detach();
if (index != dragging.index()) {
dragging.parent().trigger('sortupdate', {item: dragging});
}
dragging = null;
}).not('a[href], img').on('selectstart.h5s', function() {
this.dragDrop && this.dragDrop();
return false;
}).end().add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) {
if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) {
return true;
}
if (e.type == 'drop') {
e.stopPropagation();
placeholders.filter(':visible').after(dragging);
dragging.trigger('dragend.h5s');
return false;
}
e.preventDefault();
e.originalEvent.dataTransfer.dropEffect = 'move';
if (items.is(this)) {
if (options.forcePlaceholderSize) {
placeholder.height(dragging.outerHeight());
}
dragging.hide();
$(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder);
placeholders.not(placeholder).detach();
} else if (!placeholders.is(this) && !$(this).children(options.items).length) {
placeholders.detach();
$(this).append(placeholder);
}
return false;
});
});
};
})(jQuery);
$(function() {
$('.sortable').sortable();
$('.handles').sortable({
handle: 'span'
});
$('.connected').sortable({
connectWith: '.connected'
});
$('.exclude').sortable({
items: ':not(.disabled)'
});
});