Jquery 정렬 할 수있는 이미지

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 &copy; 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를 사용했다. 드래그 앤 드롭 또는 이미지 교체 감각으로 코딩했습니다. 누구든지이 문제에서 벗어나도록 도와주세요. 미리 감사드립니다.

출처

2017-10-31 Kavya Shree

, 우리는 더 나은 당신을 도울 수 있습니다. –

뭔가가 있습니다. 즉, 'my-container'클래스가 어디에 있습니까? –

https://jsfiddle.net/jgtLjogt/2/ 이것이 바로 fali입니다. @ali –

라이브러리 https://github.com/glekli/jQuery-Sortable-Photos을 사용하여이 문제를 해결하려고했습니다.

하지만 지금은 완료되지 않았습니다.

그러나 주

지원 http://jsfiddle.net/Lnoh2br9/2/ 위해 나는 jsfiddle을 만든 Jquery-sortable

를 사용하여 이미지를 드래그 앤 드롭을 수행하고자하는 경우 :는 http://lorempixel imges가 응답하지 약간의 시간이 될 수 있습니다.

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(); 
});

출처

2017-10-31 16:30:28

@Kavya Shree 그 해결책이 있습니까? –

아니요 이전 플러그인처럼 이미지를 정렬하지 않습니다. –

Jquery 정렬 할 수있는 이미지

답변

관련 문제