我想拖放图片。
https://github.com/glekli/jQuery-Sortable-Photos
我用这个例子进行拖放。我尝试过相同的方法，但在我的代码中它不起作用。我也没有任何错误，那么为什么它不起作用，我正在坚持这个问题。
<!doctype html>
<html lang="en">
<head>
<title>{{config('app.name')}}</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<style type="text/css">
.bg-dark
{
background: #00a1ff !important;
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link
{
font-weight: bold;
}
.navbar-dark .navbar-nav .nav-link
{
color:#fff;
}
@media(min-width: 992px)
{
.navbar-expand-lg .navbar-nav .nav-link
{
padding-left: 1em;
padding-right: 1em;
}
}
.card {
background: #fff;
border-radius: 2px;
display: inline-block;
height: 350px;
margin: 1rem;
position: relative;
width: 100%;
}
.card-5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
/*!
* Start Bootstrap - Thumbnail Gallery (https://startbootstrap.com/template-overviews/thumbnail-gallery)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-thumbnail-gallery/blob/master/LICENSE)
*/
body {
padding-top: 54px;
}
@media (min-width: 992px) {
body {
padding-top: 56px;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#" style="font-family: 'Pacifico', bold;font-size: 24px"><b>Photo Collage</b></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">English
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Netherlands</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Spanish</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Italian</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Italian</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Italian</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Italian</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Italian</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Italian</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Italian</a>
</li>
</ul>
</div>
</div>
</nav>
<div style="margin-top:15px;" class="container">
<br/><Br/>
@include('message')
<div style="margin:5px;box-shadow: 10px 10px 10px 10px #D3D3D3">
<br/>
<table style="text-align:justify" align="center" border="1" cellspacing="10" cellpadding="3">
<tr>
<td height="588px" rowspan="3" class="my-item"><img width="412" height="588px" src="http://lorempixel.com/200/200" class="img-responsive" alt=""></td>
<td height="268" colspan="2" class="my-item"><img width="203" height="268px" src="http://lorempixel.com/200/200" class="img-responsive" alt=""></td>
<td width="168" class="my-item"><img width="201" height="168px" src="http://lorempixel.com/200/200" class="img-responsive" alt=""></td>
</tr>
<tr>
<td width="168" class="my-item"><img width="201" height="168px" src="http://lorempixel.com/200/200" class="img-responsive" alt=""></td>
<td colspan="2" class="my-item"><img width="201" height="168px" src="http://lorempixel.com/200/200" class="img-responsive" alt=""></td>
</tr>
<tr>
</tr>
</table>
<br/>
</div>
</div>
<br>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Primjena Software Private Limited 2017</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" ></script>
<script src="js/jquery-sortable-photos.js"></script>
<script>
$('.my-container').sortablePhotos({
selector: '> .my-item',
sortable: true,
padding: 2
});
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('needs');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
</script>
</body>
</html>
我有5帧内部图像。为了对齐，我使用了表td。我编写了拖放或替换图像的意义。请任何人帮我解决这个问题。提前谢谢。
答案 0 :(得分：0)
我试图使用库https://github.com/glekli/jQuery-Sortable-Photos解决此问题。
但现在没有完成。
但是如果想使用Jquery-sortable
拖放图像我为支持http://jsfiddle.net/Lnoh2br9/2/
创建了一个jsfiddle注意： 可能有一段时间http://lorempixel没有响应。
<强> HTML：
<ul id="sortable">
<li class="ui-state-default">
<img src="http://lorempixel.com/100/50" class="img-responsive" alt="">
</li>
<li class="ui-state-default">
<img src="http://lorempixel.com/100/50" class="img-responsive" alt="">
</li>
<li class="ui-state-default">
<img src="http://lorempixel.com/100/100" class="img-responsive" alt="">
</li>
</ul>
<强> JS：
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});