将 id 属性添加到 jQuery dRawr 工具箱-解网

问：

我正在使用 jquery 抽屉画布，我需要在一页上有多个画布部分。我已经让它正常工作，除了画笔工具栏没有停留在各自画布旁边的页面上。如果只是一个元素（画布），我可以设置偏移量，但对于多个元素，我不能，因为它生成的元素只有一个类并被视为一个元素。

我正在尝试通过添加 ID 属性来解决这个问题。它有效，但仅适用于最后一个元素。下面示例中的所有工具栏都具有数组中最后一个元素的 ID。

示例（请注意，此数组只是数字 24,25,26）：

var question_secs = <?php echo json_encode($question_section_arr); ?>;
var arrayLength = question_secs.length;
$(document).ready(function(){
    for (var i = 0; i < arrayLength; i++) {
        var section = question_secs[i];
   //Turn a canvas element into a sketch area
   $("#drawr-container-"+ section +" .demo-canvas-"+ section +"").drawr({
        "enable_transparency" : false
    });

    //Enable drawing mode, show controls
    $("#drawr-container-"+ section +" .demo-canvas-"+ section +"").drawr("start");

    var offset = $("#canvas-"+ section +"").offset();
    var topoff = offset.top + 1127;
    var leftoff = offset.left - 83;

    $('.drawr-toolbox').attr('id', 'toolbox-' + section);

    $('#toolbox-' + section).css({top: topoff, left: leftoff, position:'absolute'});
    
    
}

});

在我的示例中，我得到了三个可用的画布和画笔工具箱，但这些工具箱在页面上的位置完全错误？这个元素“drawr-toolbox”是由库生成的，它假设你在页面上只有一个，所以没有id，因此我不能设置单独的偏移量？我想我可以去更改库文件，但这对我来说似乎是一种不好的做法。

注意：这是从库创建工具箱元素的函数

   /* Create floating dialog and appends it hidden after the canvas */
    plugin.create_toolbox = function(id,position,title,width){
        var self = this;
        var toolbox = document.createElement("div");
        toolbox.innerHTML="<div style='padding:5px 0px 5px 0px'>" + title + "</div>";
        toolbox.className = "drawr-toolbox drawr-toolbox-" + id;
        toolbox.ownerCanvas = self;
        $(toolbox).css({
            "position" : "absolute", "z-index" : 6, "cursor" : "move", "width" : width + "px", "height" : "auto", "color" : "#fff",
            "padding" : "2px", "background" : "linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%)", "border-radius" : "2px",
            "box-shadow" : "0px 2px 5px -2px rgba(0,0,0,0.75)", "user-select": "none", "font-family" : "sans-serif", "font-size" :"12px", "text-align" : "center"
        });
        $(toolbox).insertAfter($(this).parent());
        $(toolbox).offset(position);
        $(toolbox).hide();
        $(toolbox).on("mousedown.drawr touchstart.drawr", function(e){
            var ownerCanvas = this.ownerCanvas;
            var mouse_data = plugin.get_mouse_data.call(ownerCanvas,e,this);
            $(this).data("offsetx", mouse_data.x).data("offsety", mouse_data.y).data("dragging", true);
            plugin.is_dragging=true;
            e.preventDefault();
        });
        return $(toolbox);
    };

jQuery 循环画布偏移

plugin.create_toolbox = function(id, position, title, width) {
  var self = this;
  var toolbox = document.createElement("div");
  toolbox.innerHTML = "<div style='padding:5px 0px 5px 0px'>" + title + "</div>";
  toolbox.className = "drawr-toolbox drawr-toolbox-" + id;
  toolbox.ownerCanvas = self;
  $(toolbox).css({
    "position": "absolute",
    "z-index": 6,
    "cursor": "move",
    "width": width + "px",
    "height": "auto",
    "color": "#fff",
    "padding": "2px",
    "background": "linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%)",
    "border-radius": "2px",
    "box-shadow": "0px 2px 5px -2px rgba(0,0,0,0.75)",
    "user-select": "none",
    "font-family": "sans-serif",
    "font-size": "12px",
    "text-align": "center"
  });

  var canvasOffset = $(this).offset();
  var toolboxOffset = {
    top: canvasOffset.top + position.top,
    left: canvasOffset.left + position.left
  };

  $(toolbox).insertAfter(this);
  $(toolbox).hide();
  $(toolbox).offset(toolboxOffset);

  $(toolbox).on("mousedown.drawr touchstart.drawr", function(e) {
    var ownerCanvas = this.ownerCanvas;
    var mouse_data = plugin.get_mouse_data.call(ownerCanvas, e, this);
    $(this)
      .data("offsetx", mouse_data.x)
      .data("offsety", mouse_data.y)
      .data("dragging", true);
    plugin.is_dragging = true;
    e.preventDefault();
  });

  return $(toolbox);
};

jquery.drawr.combined.js 

   plugin.create_toolbox = function(id,position,title,width){
        var self = this;
        var toolbox = document.createElement("div");
        toolbox.innerHTML="<div style='padding:5px 0px 5px 0px'>" + title + "</div>";
        toolbox.className = "drawr-toolbox drawr-toolbox-" + id;
        if(id == 'brush') {
            toolbox.id = position.top; 
        }
        toolbox.ownerCanvas = self;
        $(toolbox).css({
            "position" : "absolute", "z-index" : 6, "cursor" : "move", "width" : width + "px", "height" : "auto", "color" : "#fff",
            "padding" : "2px", "background" : "linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%)", "border-radius" : "2px",
            "box-shadow" : "0px 2px 5px -2px rgba(0,0,0,0.75)", "user-select": "none", "font-family" : "sans-serif", "font-size" :"12px", "text-align" : "center"
        });
        $(toolbox).insertAfter($(this).parent());
        $(toolbox).offset(position);
        $(toolbox).hide();
        $(toolbox).on("mousedown.drawr touchstart.drawr", function(e){
            var ownerCanvas = this.ownerCanvas;
            var mouse_data = plugin.get_mouse_data.call(ownerCanvas,e,this);
            $(this).data("offsetx", mouse_data.x).data("offsety", mouse_data.y).data("dragging", true);
            plugin.is_dragging=true;
            e.preventDefault();
        });
        return $(toolbox);
    };

然后在我的主文件上，我循环启动抽屉，然后在循环之后使用 map 函数获取所有 id。然后遍历这些，为每个项目获得正确的偏移顶部（左边是静态的）并应用它。

var question_secs = <?php echo json_encode($question_section_arr); ?>;
var arrayLength = question_secs.length;

$(document).ready(function(){

for (var i = 0; i < arrayLength; i++) {
    var section = question_secs[i];

  
    $("#drawr-container-" + section + " .demo-canvas-" + section + "").drawr({
      "enable_transparency": false
    });

  
    $("#drawr-container-" + section + " .demo-canvas-" + section + "").drawr("start");
    
}

var ids_pos = [];
var ids = $('.drawr-toolbox').map(function() {
  return $(this).attr('id');
  
});

for (var x = 0; x < ids.length; x++) {
    ids_pos.push(ids[x]);
}

let unique = [];
    ids_pos.forEach(element => {
        if (!unique.includes(element)) {
            unique.push(element);
        }
    });

    for (var x = 0; x < unique.length; x++) {
    var offset_pos = document.getElementById(unique[x]);
        let str = offset_pos.style.top;
        var correct_top = Number(offset_pos.style.top.substring(0, offset_pos.style.top.length - 2)) + 1127;
        var correct_left = Number(offset_pos.style.left.substring(0, offset_pos.style.left.length - 2)) - 450;
        console.log(correct_top);
        console.log(correct_left);
        console.log(offset_pos);

        offset_pos.classList.add("pos-"+x);

        $(".pos-"+x).css({top: correct_top+"px", left: "80px", position:'absolute'});
    }
});

上一个：绘制数据表卡在循环中，继续显示处理

下一个：Javascript 自动滚动

将 id 属性添加到 jQuery dRawr 工具箱

Adding id attribute to jQuery dRawr toolbox

评论

评论