Question

在我的网页上有Gridster个窗口小部件。这些窗口小部件中都有可以删除的图像。现在，当用户点击它时，我有一个+按钮，会打开一个显示图像列表的模态。现在我希望用户选择一个图像（单击它），然后按Add Image，然后该图像应添加到指定的小部件中。

HTML：

<div class="gridster">
    <ul>

    </ul>

</div>
<button class="js-seralize btn btn-success mr-2">Serialize</button>
<textarea id="log"></textarea>

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Add Icons</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

            <img src="https://cdnd.icons8.com/wp-content/uploads/2015/07/Run-Command-100.png">
      <img src="https://png.icons8.com/metro/2x/chapel.png">
      <img src="https://png.icons8.com/metro/2x/boy.png">
      <img src="https://png.icons8.com/metro/2x/wacom-tablet.png">






      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Add Image</button>
      </div>
    </div>
  </div>
</div>

JS：

var gridster;


gridster = $(".gridster ul").gridster({
  widget_base_dimensions: [100, 100],
  widget_margins: [5, 5],
  helper: 'clone',
   serialize_params: function($w, wgd) {return {images: $w.find('textarea').val().trim() , col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y}},
  resize: {
    enabled: true
  }
}).data('gridster');


 var json = [{
    "html": "https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", //3 Images
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}, {
    "html":"https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", // 2 Images
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},

{
    "html": "https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", // 1 Image
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},


{
    "html": "https://image.flaticon.com/icons/svg/67/67994.svg,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png",  // 2 Images
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}, {
    "html": "https://image.flaticon.com/icons/svg/67/67994.svg", //1 Image
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
},

{
    "html": "https://image.flaticon.com/icons/svg/67/67994.svg,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", //2 Images
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}

];








for(var index=0;index<json.length;index++) {
    var images = json[index].html.split(',');
        var imageOutput = "";

        for(var j = 0; j < images.length; j++) {
        imageOutput += '<div class="imagewrap"><img src='+ images[j] +'> <input type="button" class="removediv" value="X" /></div></div>';
        }

gridster.add_widget('<li class="new" ><button class="addmorebrands" style="float: left;">+</button><button class="delete-widget-button" style="float: right;">-</button>' + imageOutput + '<textarea>'+json[index].html+'</textarea></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
}









$('.removediv').on('click', function () {
  $(this).closest('div.imagewrap').remove();
});


 $(document).on("click", ".delete-widget-button", function() {
        var gridster = $(".gridster ul").gridster().data('gridster');
        gridster.remove_widget($(this).parent());
    });


$('.js-seralize').on('click', function () {
    var s = gridster.serialize();
    $('.gridster ul li').each((idx, el)=>{ // grab the grid elements
       s[idx].html = $('textarea', el).html(); // add the html key/values

    json_variable=JSON.stringify(s)
   });



    $('#log').val(json_variable);
});

$(document).on("click", ".addmorebrands", function() {
        $('#exampleModalCenter').modal('show');

    });

我很沮丧地选择一个特定的图片并将其添加到特定的小部件。任何帮助都会非常棒

Fiddle Link

Answer 1

请参阅我离开您的示例 - https://jsfiddle.net/g9yxtwv0/49/

更改的代码 -

HTML

 <input type="radio" name="image" id="image_1" value="https://cdnd.icons8.com/wp-content/uploads/2015/07/Run-Command-100.png">
 <label for="image_1"><img src="https://cdnd.icons8.com/wp-content/uploads/2015/07/Run-Command-100.png"></label>
 <input type="radio" name="image" id="image_2" value="https://png.icons8.com/metro/2x/chapel.png">
 <label for="image21"><img src="https://png.icons8.com/metro/2x/chapel.png"></label>
 <input type="radio" name="image" id="image_3" value="https://png.icons8.com/metro/2x/boy.png">
 <label for="image_3"><img src="https://png.icons8.com/metro/2x/boy.png"></label>
 <input type="radio" name="image" id="image_4" value="https://png.icons8.com/metro/2x/wacom-tablet.png">
 <label for="image_4"><img src="https://png.icons8.com/metro/2x/wacom-tablet.png"></label> 


 <button type="button" class="btn btn-primary add-button">Add Image</button>

JS

$('.add-button').click(function () {

     var widgetEle = $('ul').find("[data-id='" + widgetId + "']");

     widgetEle.find('textarea').before('<div class="imagewrap"><img src="'+$('input[name=image]:checked').val()+'"> <input type="button" class="removediv" value="X"></div>');
});

// -------------

$(document).on("click", ".addmorebrands", function() {
     widgetId = $(this).parent().attr('data-id'); // get index of widget
     $('#exampleModalCenter').modal('show');

});

GRIDSTER

gridster.add_widget('<li class="new"  data-id="'+ index +'"><button class="addmorebrands" style="float: left;">+</button><button class="delete-widget-button" style="float: right;">-</button>' + imageOutput + '<textarea>'+json[index].html+'</textarea></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);

现在你只需要设计无线电的样式。

使用JS / jquery选择并添加图像

1 个答案: