나는 드래그 & 모든 선수들에게 (축구 매니저)

Question

하락 후

이 봐 ... 난 선수 축구장이 있고 내가 드래그를 통해 자신의 라인업을 생성하고 삭제하도록 사용자에게 원하는 요소 값을 떨어 절약 할 수있는 방법 내 바이올린에 : 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'>"); 
     } 
    }); 
}); 

(순간에 하나 개의 위치, 단지 시험이있다) ----> 당신은 이동해야 사각형 (내 골키퍼의 평균 위치)에 텍스트 (오른쪽)

하지만 내 11 개의 포지션이 있고 "사용자"가 자신의 라인을 초안으로 작성되면 어떻게 그의 선택을 저장할 수 있습니까?

ID가 있습니까? 또는 그가 요소를 떨어 뜨린 직후마다? 힌트

에 대한

감사

편집 : 내가 떨어 플레이어 (삭제할 수있는 방법을 다른 힌트를 정말 행복 할 것 -> DOM을 - 예를 들어 대신에 그의 셔츠를 삭제하고 "GOALKEPPER"를 쓰기 조작 DIV 또는 <p> 요소)

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 코드 조각

.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 속성이 조정 된 것을 볼 수 있습니다. 이렇게하면 드래그 앤 드롭 요소가 훨씬 더 구체적인 ID를 가질 수 있고, 더 일반적인 방식으로 CSS를 통해 스타일을 지정할 수 있습니다. 또한 Draggable 및 Dppppable 부분을 초기화 할 때 이것이 어떻게 도움이 될 수 있는지에 대한 예를 플러시하는 위치를 추가했습니다.

두 번째로 드래그 항목에 data-type 속성을 추가했음을 알 수 있습니다. 데이터베이스의 SKU 또는 ID, 제품 이름 등이 될 수 있습니다. 데이터를보다 잘 맞출 수 있도록 속성을 변경할 수도 있습니다. 그러나 이것은 사용자가 선택한 내용과 나중에 그 내용을 삭제 한 내용을 식별하는 방법이 될 것입니다.

다음으로 필요한 경우 작동하도록 CSS를 업데이트합니다. position을 사용하여 #field 경계를 만들 수 있으므로 각 absolute 요소가 정확하게 있어야하는 위치에 배치됩니다.

마지막으로 jQuery 코드가 많이 있습니다. 우리의 draggables에 큰 변화가 많이 없습니다. 이제는 항목이 더 많은 경우 클래스 선택기를 기반으로 각 항목에 적용됩니다. 도우미를 만들 때 데이터 속성을 압정하여 드롭 위치에 적용 할 수 있습니다.

드롭을 위해 더 많은 작업을 수행하고자합니다.

1. 항목
을 제거하면 사용자가 선택을
2. 스토어 원본 텍스트를 제거 할 수있는 방법을 만들기 제품/ID 데이터
3. img
4. 업데이트 만 드래그 항목을
5. 추가]를 수락

이것이 더 이상 드롭 가능하지 않아야할지 확실하지 않지만 쉽게 추가 할 수 있으므로 ne를 삭제할 수 없습니다. w 항목을 그 위에 놓습니다. 그런 다음 제거 버튼에서 다시 초기 드롭합니다.

이 모든 것이 드롭에 발생합니다. ($(this) 주위에) 혼동을 피하기 위해, 나는 드롭 바깥에서 제거 버튼 클릭 기능을 설정했다.

충분히 건강해야합니다. 저장 버튼이나 완료 버튼을 만들 수 있을지 의심됩니다. 여기에서는 각 .drop을 반복하고 각 data-type 속성에 대한 정보와 함께 (부모 div)의 정보를 찾습니다. 그런 다음 처리 할 데이터를 보낼 객체 또는 배열을 작성할 수 있습니다.