divの上のテキストラベル

Question

画像の上にラベルとともに複数のマーカーピンを追加しようとしています。ここで

はjsfiddleコードです： https://jsfiddle.net/at3wsepm/

私はマーカーピンを追加できるんだけど、（pinid入力から）マーカーの上にテキストラベルを置くための最良の方法は何ですか？

私はドラッグ可能なオブジェクトの配列にマーカーを追加してい

var pins = []; 

$("#addPin").on("click", function(){ 
    var elem = $("<div/>").addClass("pin"); 
    $("#carea").append(elem); 
    pins.push(new draggable(elem, updatePins)); 

}); 

Answer 1

デモ：あなたは、ピンの作成方法https://jsfiddle.net/at3wsepm/1/

ちょうど同様にテキストを追加します。それらを1つのアイテムにする。

var pintitle = $("#pinid").val(); 
    var elemstr= "<div> <span class='txt'>"+pintitle +"</span> </div>"; 
    var elem = $(elemstr).addClass("pin"); 

お知らせ私はdivの内側に追加span。 CSSを使用して場所を調整します。

Answer 2

あなたは単にラベル、およびテキストノードを作成し、入力の値にテキストノードの値を設定することを願って助け、

Answer 3

.pin:after{ 
content: attr(content-after); // this will be set from jquery 
} 
$("#addPin").on("click", function(){ 
    var elem = $("<div/>"); 
    var id =$("#pinid").val(); // get text 
    elem.attr("id",id); 
    elem.addClass("pin"); 
    elem.attr('content-after',id); // set content-after id which css will catch from that name 
    $("#carea").append(elem); 
    pins.push(new draggable(elem, updatePins)); 

}); 

、CSS Contentが動作する、thisを試して、た.pinのdivの中にそのラベルを追加し、私はあなたのコードを変更した、そしてそれは魅力

HTML

のように動作します

<div id="carea" class="carea"> 
<div id="pinsid" class="pinsid"> 

</div> 
</div> 

<div id="dsip"></div> 

<input type="text" required="true" placeholder="Pin ID..." name="pinid" id="pinid"> 
<input type="button" value="Add Pin" id="addPin" > 

CSS

#carea { 

    background: #19d223; 
    position: relative; 
    width: 200px; 
    height: 200px; 
} 

.pin { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100px; 
    height: 100px; 
    background-image:url('https://i.downloadatoz.com/download/icon2/5/f/9/ca21cf4a9f7385a7d55b2efcf2b8c0d3.jpg'); 
    cursor: move; 
} 

.pin label{ 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

JS

(function ($) { 

    var draggable = function(element, updateFunc){ 
    this.position = {x : 0, y : 0}; 
    this.element = element; 
    var _this = this; 
    $(_this.element).draggable({ 

     stop: function() { 

      _this.position.x = _this.element.position().left; 
      _this.position.y = _this.element.position().top; 
      updateFunc(); 
      } 
    }); 
    } 
    window.draggable = draggable; 
}(window.jQuery)); 



var pins = []; 

$("#addPin").on("click", function(){ 
    var elem = $("<div/>").addClass("pin"); 
    var label = document.createElement("label"); 
    var detailt = document.createTextNode($('input#pinid').val()); 
    label.appendChild(detailt); 
    elem.append(label); 
    $("#carea").append(elem); 

    pins.push(new draggable(elem, updatePins)); 

}); 
function updatePins(){ 
    $("#pinslist ul").empty(); 
    for(var p in pins){ 
    var pin = pins[p]; 

    } 
} 
//var dd = new draggable(null); 

ここで

へ fiddleです