Использование перетаскивания для создания изображения

Question

Использование перетаскивания для создания изображения

0

Я пытаюсь построить торт, перетаскивая некоторые элементы в него, а затем, чтобы я мог загрузить изображение со всеми пунктирами, но я не хочу, чтобы изображение элемента исчезло, я хочу, чтобы это количество каждый раз, когда я перетащите его. Кто-нибудь строил что-то подобное раньше? Мне нужен пример, пожалуйста, я должен сделать это в javascript или JQuery.

Это мой gui:

Christian 06 май 2015, в 01:36

Источник

0

Не могли бы вы добавить больше информации об этом? какие библиотеки вы используете, любой пример кода (fiddle, jsbin) и т. д. Было бы легче получить ответы, если бы вы могли предоставить больше информации здесь.
muhammed basil 05 май 2015, в 23:38

Теги:

javascript

jquery

ajax

html5

drag-and-drop

1 ответ

Ещё вопросы

Не могли бы вы добавить больше информации об этом? какие библиотеки вы используете, любой пример кода (fiddle, jsbin) и т. д. Было бы легче получить ответы, если бы вы могли предоставить больше информации здесь.

herrbischoff · Answer 1 · 2015-05-06T12-31-00.000Z

Не зная, что именно вы после этого, я предполагаю, что вы ищете своего рода решение для корзины покупок. jQueryUI Droppable, кажется, самый простой способ сделать это, посмотрите этот базовый пример:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Droppable - Shopping Cart Demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  h1 { padding: .2em; margin: 0; }
  #products { float:left; width: 500px; margin-right: 2em; }
  #cart { width: 200px; float: left; margin-top: 1em; }
  /* style the list to maximize the droppable hitarea */
  #cart ol { margin: 0; padding: 1em 0 1em 3em; }
  </style>
  <script>
  $(function() {
    $( "#catalog" ).accordion();
    $( "#catalog li" ).draggable({
      appendTo: "body",
      helper: "clone"
    });
    $( "#cart ol" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function( event, ui ) {
        $( this ).find( ".placeholder" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
      }
    }).sortable({
      items: "li:not(.placeholder)",
      sort: function() {
        // gets added unintentionally by droppable interacting with sortable
        // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
        $( this ).removeClass( "ui-state-default" );
      }
    });
  });
  </script>
</head>
<body>

<div id="products">
  <h1 class="ui-widget-header">Products</h1>
  <div id="catalog">
    <h2><a href="#">T-Shirts</a></h2>
    <div>
      <ul>
        <li>Lolcat Shirt</li>
        <li>Cheezeburger Shirt</li>
        <li>Buckit Shirt</li>
      </ul>
    </div>
    <h2><a href="#">Bags</a></h2>
    <div>
      <ul>
        <li>Zebra Striped</li>
        <li>Black Leather</li>
        <li>Alligator Leather</li>
      </ul>
    </div>
    <h2><a href="#">Gadgets</a></h2>
    <div>
      <ul>
        <li>iPhone</li>
        <li>iPod</li>
        <li>iPad</li>
      </ul>
    </div>
  </div>
</div>

<div id="cart">
  <h1 class="ui-widget-header">Shopping Cart</h1>
  <div class="ui-widget-content">
    <ol>
      <li class="placeholder">Add your items here</li>
    </ol>
  </div>
</div>


</body>
</html>

Источник: http://jqueryui.com/droppable/#shopping-cart