Detailliertes Beispiel für die Kombination von jQuery UI Draggable + Sortable-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Detailliertes Beispiel für die Kombination von jQuery UI Draggable + Sortable

Dec 29, 2017 am 10:27 AM

jquery

Während der Arbeit müssen Sie ein entworfenes Steuerelement im linken Bereich in den rechten Bereich ziehen, während die Steuerelemente im rechten Bereich frei sortiert bleiben. Zu diesem Zeitpunkt müssen Sie hauptsächlich Zieh- und Sortiervorgänge unterstützen Bringen Sie einen Artikel über die kombinierte Verwendung von jQuery UI Draggable + Sortable (Erklärung mit Beispielen). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Demo-Screenshot: Ziehen Sie vom linken Steuerelement in den rechten Bereich

Code-Snippet:

&lt;script type=&quot;text/javascript&quot;&gt;
  $(function () {
    $("#box_wrap1,#box_wrap2").sortable({
      connectWith: ".box_wrap",
      helper: "clone",
      cursor: "move",//移动时候鼠标样式
      opacity: 0.5, //拖拽过程中透明度
      placeholder: "box-holdplace",//占位符className，设置一个样式
    }).disableSelection();
  
    $(".dragable").draggable({
      connectToSortable: ".sortable",
      helper: "clone",
      // revert: "invalid",
      // handle: ".handle"
    });
  });
&lt;/script&gt;

Nach dem Login kopieren

Html-Code:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot; /&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link href=&quot;js/bootstrap/css/bootstrap.css&quot; rel=&quot;external nofollow&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;link href=&quot;js/bootstrap/css/bootstrap-theme.min.css&quot; rel=&quot;external nofollow&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;link href=&quot;css/index.css&quot; rel=&quot;external nofollow&quot; rel=&quot;stylesheet&quot; /&gt;
  
  &lt;script src=&quot;js/jquery-1.10.2.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;js/bootstrap/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;!--Sortable --&gt;
  &lt;script src=&quot;//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  
&lt;/head&gt;
&lt;body&gt;
  &lt;p class=&quot;container&quot;&gt;
    &lt;p class=&quot;row&quot;&gt;
      &lt;p class=&quot;column col-md-6&quot;&gt;
        &lt;p class=&quot;box_wrap &quot; id=&quot;box_wrap1&quot; &gt;
          &lt;p class=&quot;box dragable&quot;&gt;
            left-test1
          &lt;/p&gt;
          &lt;p class=&quot;box dragable&quot;&gt;
            left-test2
          &lt;/p&gt;
          &lt;p class=&quot;box dragable&quot;&gt;
            left-test3
          &lt;/p&gt;
        &lt;/p&gt;
      &lt;/p&gt;
      &lt;p class=&quot;column col-md-6&quot;&gt;
        &lt;p class=&quot;box_wrap sortable&quot; id=&quot;box_wrap2&quot;&gt;
          &lt;p class=&quot;box&quot;&gt;
            test1
          &lt;/p&gt;
          &lt;p class=&quot;box&quot;&gt;
            test2
          &lt;/p&gt;
          &lt;p class=&quot;box&quot;&gt;
            test3
          &lt;/p&gt;
        &lt;/p&gt;
      &lt;/p&gt;
    &lt;/p&gt;
  &lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Verwandte Empfehlungen:

Yii Framework-Entwicklungs-Tutorial Zii-Komponenten-sortierbares Beispiel_PHP-Tutorial

Yii Framework-Entwicklungs-Tutorial Zii-Komponenten-sortierbares Beispiel

Lösung zum Speichern des Status nach sortierbarer Sortierung in jquery_jquery

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Kombination von jQuery UI Draggable + Sortable. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn