html如何实现点击按钮后在页面中添加一个标签

html页面中通过点击一次或多次按钮来向页面中添加一个或多个可以拖动的标签，
所添加的标签是可以拖动的，并且拖动以后可以记住所在的位置，之后再次打开
该网页时标签仍能在上次所在的位置。
请问通过什么手段或是使用某种控件可以实现上述的功能？请各位大佬指教。

通过Ajax，组织你的Html代码片段，插入到相应的位置上即可。

这个不需要用控件，自己动态添加标签，然后记住标签写入后台就可以了，下次打开页面再获取一下标签的坐标就可以了
这段代码给你，你要完善的就是把坐标存入后台，再让在获取一下标签坐标初始化到页面就可以了，满意请采纳

//html
<button onclick="createHtmlTag();">点击我增加标签</button>
<div id="contentDiv">
    <span id="tag1" class="tag_a" onmousedown="mouseDown(this.id,event)" onmousemove="mouseMove(event)" onmouseup="mouseUp(event)">标签1</span>
</div>

//css
#contentDiv{
    width: 300px;
    height: 300px;
    position: absolute;
}

.tag_a{
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    margin-left:20px;
    margin-top:20px;
}


//js，这里要记得引入jquery

//用来判断是否可移动
var moveFlag=false;
var tag=null;
var x,y;
var tag_id = 2;

function createHtmlTag(){
  var tag = '<span id="tag' + tag_id + '" class="tag_a" onmousedown="mouseDown(this.id,event)" onmousemove="mouseMove(event)" onmouseup="mouseUp(event)">标签' + tag_id + '</span>';
  $("#contentDiv").append(tag);
  tag_id ++;
}

function mouseDown(id,event){
    tag = $("#" + id);
    var left = tag.css("margin-left");
  var top = tag.css("margin-top");
  left = left.substring(0,(left.length - 2));
  top = top.substring(0,(top.length - 2));
    x = event.x - parseInt(left);
    y = event.y - parseInt(top);
    moveFlag=true;
}

function mouseMove(event){
    if(moveFlag){
        tag.css("margin-left",(event.x - x)+'px');
        tag.css("margin-top",(event.y - y)+'px');
    }
}

document.onmousemove = function(e) {
    if (moveFlag) {     
      tag.css("margin-left",(e.x - x)+'px');
      tag.css("margin-top",(e.y - y)+'px');
    };
};

function mouseUp(event){
    moveFlag=false;
}