Как я могу сохранить тащил и упал элементы VALUE после упал всем игрокам (футбольный менеджер)

Question

У меня есть поле игрока в футболе, и я хочу, чтобы пользователь создать свой собственный LineUp с помощью перетаскивания ...

имеет вид на моей скрипке: https://jsfiddle.net/ahsce0oj/2/

это мой JS код и моя скрипка:

$(function() { 
    $("#draggable2").draggable({    
     appendTo: "body", 
     cursorAt: { 
      cursor: "move", 
      top: 5, 
      left: 0 
     }, 
     helper: function(event) { 
      return $("<img width='5%' src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'>"); 
     } 
    }); 

    $("#droppable2").droppable({ 
     accept: "#draggable2", 
     classes: { 
      "ui-droppable-active": "ui-state-default" 
     }, 
     drop: function(event, ui) { 
      $(this).find("p").html("<img width='100%' src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'>"); 
     } 
    }); 
}); 

(есть только одна позиция на данный момент, просто тест) ----> Вы должны переместить Текст (справа) в прямоугольник (среднее положение моего вратаря)

, но когда у меня есть одиннадцать позиций, а «пользователь» - с черновиком, как я могу сохранить его выбор?

с идентификаторами? или каждый раз сразу после того, как он сбросил элемент?

спасибо за любые подсказки

Edit: Я был бы очень рад за любые другие подсказки, как я могу удалить прерванный игрок (-> манипулировать DOM-например, удалить его рубашку и писать «GOALKEPPER» вместо того, чтобы в a DIV или a <p> Element)

Answer 1

Существует множество способов достижения ваших целей (каламбур, ха!) здесь. Я то, что я хотел бы сделать:

Рабочий пример: https://jsfiddle.net/Twisty/54vgb8bx/4/

фрагмент кода HTML

<section id="content"> 
    <div id="field"> 
     <div id="goalie" class="drop center rear"> 
     <p>Goal Keep</p> 
     </div> 
     <div id="rightback" class="drop right mid"> 
     <p>R. Back</p> 
     </div> 
     <div id="leftback" class="drop center mid"> 
     <p>C. Back</p> 
     </div> 
     <div id="leftback" class="drop left mid"> 
     <p>L. Back</p> 
     </div> 
     <div id="rightforward" class="drop right for"> 
     <p>R. Forward</p> 
     </div> 
     <div id="leftforward" class="drop left for"> 
     <p>L. Forward</p> 
     </div> 
    </div> 
    </section> 

    <!-- SIDBAR RIGHT --> 
    <aside> 
    <div id="item-1" data-type="shirt" class="drag"> 
     <p>Move me into the rectangle! ! !</p> 
    </div> 
    </aside> 

CSS Snippet

.drag { 
    float: left; 
    padding: 0% 1% 0%; 
    margin-top: 1%; 
    margin-right: 0%; 
    width: 39%; 
    color: white; 
    background-color: black; 
} 

.drop { 
    border: 2px solid white; 
    height: 5vw; 
    width: 5vw; 
    color: white; 
    font-size: 13px; 
    text-align: center; 
} 

.rear { 
    position: absolute; 
    top: 0; 
} 

.mid { 
    position: absolute; 
    top: 150px; 
} 

.for { 
    position: absolute; 
    top: 300px; 
} 

.right { 
    left: 135px; 
} 

.center { 
    left: 273px; 
} 

.left { 
    left: 403px; 
} 

#field span.remove:hover { 
    background-color: #000; 
    border-radius: 8px; 
} 

JQuery

$(function() { 

    $(".drag").draggable({ 
    appendTo: "body", 
    cursorAt: { 
     cursor: "move", 
     top: 5, 
     left: 0 
    }, 
    helper: function() { 
     var displayImage = $("<img>", { 
     width: "5%", 
     src: 'https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg' 
     }).data("type", $(this).data("type")); 
     return displayImage; 
    } 
    }); 

    $(".drop").droppable({ 
    accept: ".drag", 
    classes: { 
     "ui-droppable-active": "ui-state-default" 
    }, 
    drop: function(event, ui) { 
     var removeButton = $("<span>", { 
     class: "ui-icon ui-icon-circle-close remove" 
     }); 
     var dropImage = $("<img>", { 
     width: "100%", 
     src: ui.helper.attr("src") 
     }); 
     $(this) 
     .data("type", ui.helper.data("type")) 
     .data("title", $(this).text()) 
     .find("p") 
     .html(dropImage); 
     removeButton.appendTo($(this).find("p")).position({ 
     my: "left bottom", 
     at: "right top", 
     of: $(this).find("img") 
     }); 
    } 
    }); 

    $("#field").on("click", "span.remove", function() { 
    var me = $(this).parent(); // p 
    var parent = me.parent(); // div 
    var title = parent.data("title"); 
    parent.data("type", "").html("<p>" + title + "</p>"); 
    }); 
}); 

Сначала вы увидите, что я скорректировал атрибуты id и class. Это позволяет элементам перетаскивания иметь гораздо более конкретные идентификаторы, а затем их можно использовать с помощью CSS более обобщенным образом. Я также добавил больше позиций, чтобы вывести пример того, как это может помочь при инициализации части Draggable и Droppable.

Во-вторых, вы можете заметить, что я добавил атрибут data-type в наш элемент перетаскивания. Это может быть SKU или ID из базы данных, название продукта, что угодно. Мы также можем изменить атрибут, чтобы лучше соответствовать данным. Но это будет то, как мы определяем то, что выбрал пользователь, и то, что позже его удалило.

Далее мы обновляем CSS, чтобы работать так, как нам может понадобиться. Используя position, я могу сделать #field нашей границей, так что каждый элемент absolute внутри расположен точно там, где он должен быть.

И наконец, много кода jQuery. Не так много больших изменений в наших перетаскиваниях. Учтите, что если у вас больше предметов, это применимо к каждому из них на основе их селектора классов. Когда мы создаем помощника, мы применяем атрибут data, чтобы мы могли направить его на позицию падения.

Для снижения мы хотим сделать больше.

1. принимать только элемент перетащить
2. Append в обновление img
3. данные продукта/ID
4. Создать способ для пользователя, чтобы убрать выделение
5. магазин оригинальный текст, если элемент удален

Непонятно, не должно ли это быть уже недоступным, но вы можете легко добавить это, так что вы не могли отказаться от ne w на него. Но затем первоначальное падение снова в кнопке удаления.

Все это происходит в случае падения. Чтобы избежать путаницы (около $(this)), я устанавливаю функцию щелчка кнопки удаления за пределами капли.

Этого должно быть достаточно, чтобы вы хорошо себя чувствовали. Я подозреваю, что вы сделаете кнопку сохранения или завершения. В этом случае я бы посоветовал повторить каждый .drop и искать информацию в атрибуте data-type для каждого, а также id от родителя div. Затем вы можете построить объект или массив для отправки данных для последующей обработки.