JQuery Sortierbare Bilder

Ich möchte Bilder ziehen und ablegen.JQuery Sortierbare Bilder

https://github.com/glekli/jQuery-Sortable-Photos

benutzte ich dieses Beispiel für Drag & Drop. Ich habe es auf die gleiche Weise versucht, aber in meinem Code funktioniert es nicht. Ich habe auch keinen Fehler gemacht, dann warum es nicht funktioniert, ich stecke mit diesem Problem fest.

<!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>

Ich habe 5 Bilder mit Bildern im Inneren. Für die Ausrichtung habe ich die Tabelle td verwendet. Ich habe für drag and drop oder im Sinne von Bilder ersetzen codiert. Bitte helfen Sie mir, dieses Problem zu lösen. Danke im Voraus.

Quelle

2017-10-31 Kavya Shree

Wenn Sie eine Geige hinzufügen, können wir Ihnen helfen, besser. –

Sie vermissen etwas, dh wo ist Klasse 'my-container' –

https://jsfiddle.net/jgtLjogt/2/ Dies ist die Geige @ali –

Ich habe versucht, dieses Problem mit der Bibliothek https://github.com/glekli/jQuery-Sortable-Photos zu lösen.

Aber nicht jetzt getan.

Aber wenn will das Bild per Drag & Drop getan Jquery-sortable

ich mit einem jsfiddle für die Unterstützung erstellt haben http://jsfiddle.net/Lnoh2br9/2/

Hinweis: einige Zeit sein kann http://lorempixel imges nicht reagiert.

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

Quelle

2017-10-31 16:30:28

@Kavya Shree Haben Sie diese Lösung? –

Nein, es sortiert keine Bilder wie das vorherige Plugin –

JQuery Sortierbare Bilder

Antwort

Verwandte Themen